p-dialog onHide is not working with ngIf?

Question

Already SO has the similar question , I tried with those solution but not working.

Actual the problem is onHide event is not triggering because of the *ngIf , If I removed the *ngIf onHide is triggering.

 <p-dialog [(header)]="dialogText" *ngIf="displayDlg" [(visible)]="displayDlg" 
  [modal]="true" [responsive]="true" (onHide)="close()">

But the problem is I am having the form inside the <p-dialog If I am not using the *ngIf I am getting the undefined error when loading the page. How can I fix this issue.?

Answer 1

    <ng-container *ngIf="displayDlg">
        <p-dialog [(header)]="dialogText" [(visible)]="displayDlg" 
        [modal]="true" [responsive]="true" (onHide)="close()">
    </ng-container>

add your form loading logic in *ngIf of ng-container.

Answer 2

I had the same problem. Solved by using a different boolean variable for the *ngIf in the p-dialog tag compared to the [(visible)] attribute. Using the same variable for both it did not work for me. That is the basic idea. I did it in an object oriented way. I won't bore you with further details.