angularprimengprimeng-dialog

How can I use dismissableMask in PrimeNG

I am trying to hide a dialog when I click outside of dialog, but I can't make it with dismissabeMask in PrimeNG. Can anyone help me please ?

HTML

<button type="text" (click)="showDialog()" pButton icon="fa-external-link-square" label="Show"></button>
<p-dialog [(visible)]="display" [(dismissableMask)]="mask"> 
    <p-header>
        Error Message
    </p-header>
        <label>Label</label>
    <p-footer>
    </p-footer>
</p-dialog

TS

mask: boolean = false;
showDialog() {
  this.msg = this.errorMessages[id];
  this.display = true;
  this.mask = true;
}
Solution

  • Change 

    <p-dialog [(visible)]="display" [(dismissableMask)]="mask">

    with 

    <p-dialog [(visible)]="display" modal="true" dismissableMask="true">

    If you don't add modal="true", it won't work (see Plunker)