How to set z-index when clicked with dialog overlays (PrimeNG)?

Question

Currently I am using dialogs from PrimeNG like this:

<button type="button" class="button button-3 button-3a" 
   (click)="openCloseFront()"><iclass="fa fa-eye"></i>View Image 
</button>
<button type="button" class="button button-3 button-3a" 
   (click)="openCloseBack()"><iclass="fa fa-eye"></i>View Image 
</button>
<p-dialog [(visible)]="frontOpened" header="ID Front Side" 
          [responsive]="true"
          [style]="{width: '350px', minWidth: '200px'}" 
          [minY]="70" [maximizable]="true" 
          [baseZIndex]="10000">
  /* code here with img*/
</p-dialog>
<p-dialog [(visible)]="backOpened" header="ID Back Side" 
          [responsive]="true"
          [style]="{width: '350px', minWidth: '200px'}" 
          [minY]="70" [maximizable]="true" 
          [baseZIndex]="10000">
  /* code here with img*/
</p-dialog>

And I use buttons to open them like below:

public openCloseFront() {
   this.frontOpened = !this.frontOpened;
}

public openCloseBack() {
   this.backOpened = !this.backOpened;
}

Current behavior is that the last opened dialog is the one with the biggest z-index. The problem here is that I cannot find a way to show the dialog when I click on it. What I mean is that I want to set z-index to be the highest when I click in the dialog in order to get it in front of all. Any idea?

Answer 1

One solution to the above problem is:

1) Use tag to each p-dialog and call moveOnTop on (click) like below:

<p-dialog #pdFront [(visible)]="frontOpened" header="ID Front Side" 
      [responsive]="true"
      [style]="{width: '350px', minWidth: '200px'}" 
      [minY]="70" [maximizable]="true" 
      [baseZIndex]="10000" (click)="pdFront.moveOnTop()">
 /* code here with img*/
</p-dialog>
<p-dialog #pdBack [(visible)]="backOpened" header="ID Back Side" 
      [responsive]="true"
      [style]="{width: '350px', minWidth: '200px'}" 
      [minY]="70" [maximizable]="true" 
      [baseZIndex]="10000" (click)="pdBack.moveOnTop()">
  /* code here with img*/
</p-dialog>