Why do ng-if don't work inside a mat-dialog


I have created a mat-dialog component to fire for http response. When I include a ngIf statement inside the html for the mat-dialog,it is not handled. On the console it shows a warning as follows.

Can’t bind to ‘ngIf’ since it isn’t a known property of ‘div’.

NgIf works fine in all other components in the project.

Calling for mat-dialog inside typescript file.

 this.matDialog.open(PaymentModelComponent, {
              width: "630px",
              data: { message: response.comment },
              autoFocus: false,
              height: "630px",

html code

<div *ngIf="true"><p>Show this only if "show" is true</p></div>

Why do ng-if don’t work inside a mat-dialog ?


All I needed to do was to add the DialogComponent to the module’s declarations:

declarations: [..., MyDialogComponent]

No need to have the component code in the same file.

Answered By – Mutual Exception

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published