CODEWITHSUNDEEP
angulartypescriptmodal-dialogprimeng
Luis
Luis

Reputation: 2143

Close Primeng's ModalBox when clicked

I am reviewing the Primeng documentation for the Modals, but I can not find a way to programmatically close a Modal Box (Example, when I click the "accept" button).

source: https://www.primefaces.org/primeng/#/dialog

Upvotes: 0

Views: 14101

Answers (2)

Vaska Izoria
Vaska Izoria

Reputation: 61

Now you dont need to use hide and show. You need to include DynamicDialogRef service for example:

 constructor(private ref: DynamicDialogRef) {}

 closeModal(): void {
    this.ref.close();
 }

 closeModalWithData(): void {
   // you can pass data like this
   this.ref.close(data)
   // and catch it after with onClose event
 }

Upvotes: 2

Rax Weber
Rax Weber

Reputation: 3780

As shown on the documentation, the <p-dialog> component has a [(visible)] property. It's two-binding, so you can actually close (or hide) the element by setting the aforementioned property's value to false. Example:

<p-dialog header="Foo" [(visible)]="showDialog">
  <p-footer>
    <button type="button" (click)="functionToCloseDialog()" label="Accept"></button>
  </p-footer>
</p-dialog>

And your ts file will have something like:

export class SomeComponent {
  showDialog: boolean;

  functionToCloseDialog() {
    this.showDialog = false; // closes/hides the dialog box
  }
}

Upvotes: 2

Related Questions