当 p-dialog 已经在 angular 5 的视图中时，primeng p-confirmDialog 不显示

Question

I am having trouble to use the p-confirmDialog on the top of the p-dialog in angular.

I have tried appendTo="body" but it is not working for me.

Is there anyway we can get the p-confirmDialog on top of the p-dialog?

I have checked in html using inspect element but I am not able to see the p-confirmDialog at all.

I don't know what I am doing wrong.

Child Component:

import {ConfirmationService} from 'primeng/components/common/confirmationservice';

constructor(protected confirmBox: ConfirmationService) {}

opendialog() {
  let message = "Are you sure you want to active this template?"

  this.confirmBox.confirm({
    message: "Are you sure you want to active this template?",
    header: "Confirmation",
    icon: "fa fa-question-circle",
    accept: () => {
      //logic
    },
    reject: () => {
      console.log('Ok');
    }
  });
}

Parent Component:

<p-dialog [closable]="true" header="Confgiure " [(visible)]="displayConfiguration" [contentStyle]="{'overflow':'visible'}" [width]="1650" modal="modal" [responsive]="true">

  <app-configure-template [typeSelected]="typeSelected" *ngIf="displayConfiguration"></app-configure-template>

</p-dialog>

<p-confirmDialog appendTo="body"></p-confirmDialog>

Child Component: app-configure-template:

<div>
  <button class="" pButton (click)="opendialog()" label="Confirm"></button>
</div>

<p-confirmDialog appendTo="body"></p-confirmDialog>

Answer 1

Have you tried baseZIndex?

 [baseZIndex]="1000"