Angular 6 Primeng confirmdialog inside of dialog deactivates page

Question

I am trying to add a confirm dialog into a dialog box that is in a component on my navbar.

  <p-menubar>
      <div>
          <app-overlay></app-overlay>
      </div>
  </p-menubar>

this component has an overlay Panel that opens a dialog box. On the page that it is opening from also has a confirm dialog inside of it that is used for other reasons. Whenever the overlay panel confirm dialog is opened, it opens the other graying out the screen and freezing the screen. I have used the z index to bring the dialog forward but the background is still disabled after closing the dialog box. I have also tried [appendTo]="body". If I remove the confirmdialog on the back page then it behaves as normal. So, I know it has something to do with having two, one opening the other.

Inside component that also has a confirmdialog box that opens when this is activated:

<p-dialog>
    <p-confirmDialog [appendTo]="body"></p-confirmDialog>
    <p-messages [(value)]="errors"></p-messages>
    <div>
    </div>
    <p-footer>
    </p-footer>
</p-dialog>

Some css:

.ui-confirmdialog {
     z-index: 100000 !important;
}

Nothing I tried has worked, so far any help would be appreciated.

Answer 1

Try adding the below to your component style sheet

::ng-deep .ui-confirmdialog {
  z-index:100000 !important
}

Without ::ng-deep it would need to go into your global style sheet.

---

Please reference the answer on this SO question for why using ::ng-deep is ok until further notice.

What to use in place of ::ng-deep