CODEWITHSUNDEEP
angularprimengprimeng-dialog
I'mVSPA
I'mVSPA

Reputation: 118

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;
}

Upvotes: 1

Views: 4233

Answers (1)

Antikhippe
Antikhippe

Reputation: 6655

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)

Upvotes: 5

Related Questions