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

Question

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 ?

Answer 1

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.