Как открыть одно всплывающее окно за раз и закрыть всплывающее окно при внешнем щелчке в angular2

Question

У меня есть всплывающее окно, которое должно открываться по одному за раз. Он должен открыть последний, по которому щелкнули, и скрыть предыдущий. Это также не закрывается при внешнем щелчке. Кто-нибудь может мне помочь решить это?

HTML:

<td>
          <a (click)="editCondition(rowData)">
            <i class="fa fa-ellipsis-h" style="color:#0847a1"></i>
          </a>
          <div class="switch-list" id="switch-list" *ngIf="rowData.isViewDetails">
            <a id="ccd_viewdetails" (click)="gotoViewDetails(rowData)">View Details</a>
            <a>Download</a>
          </div>
        </td>

TS:

 editCondition(rowData) {
    console.log(rowData);
    rowData.isViewDetails = !rowData.isViewDetails;
  }

Вот рабочая демонстрация:

https://stackblitz.com/edit/angular-c16wte?file=src/app/app.component.ts

Answer 1

Просто сбросьте все items из ccdList.

Нужны небольшие изменения в вашей функции editCondition

 editCondition(rowData) {
    this.ccdList.forEach(item=>{
      item.isViewDetails = false;
    })
    console.log(rowData);
    rowData.isViewDetails = !rowData.isViewDetails;
  }

Для внешнего клика используйте HostListener

@HostListener('document:click', ['$event'])
  windowClick($event) {
    let exceptElementFound = false;
    Object.keys($event.target.classList).forEach(key => {
      if ($event.target.classList[key] == "fa-ellipsis-h") {
        exceptElementFound = true;
      }
    })
    if (!exceptElementFound) {
      this.ccdList.forEach(item => {
        item.isViewDetails = false;
      })
    }
  }

Рабочая копия здесь - https://stackblitz.com/edit/angular-bbyz8n

Answer 2

Вы можете попробовать и использовать HostListener в своем приложении.

@HostListener('document:click', ['$event'])
clickOutside(){
  // do something
}