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 ?

Does this answer your question? [Can't bind to 'ngIf' since it isn't a known property of 'div'](https://stackoverflow.com/questions/39058075/cant-bind-to-ngif-since-it-isnt-a-known-property-of-div) — Dane Brouwer, Jul 09 '20 at 06:49
Are you sure your modal component is in the correct module? And that it imports `BrowserModule`/`CommonModule`? — Dane Brouwer, Jul 09 '20 at 07:08
I am not sure I undestood earlier comment correctly. I am bit new to angular. BrowserModule and CommonModule are used as imports in the app.module.ts. I have used MyDialogModel as a entryComponents . Is it okay? — sadisha nadiej, Jul 09 '20 at 07:12
Hello, have you find the solution? Cause I get the same case with you. Thanks... — Kenny Basuki, Jul 14 '20 at 08:03

score 9 · Accepted Answer · answered Jan 24 '21 at 06:04

9

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 Jan 24 '21 at 06:04

Mutual Exception

1,240
12
27

score 3 · Answer 2 · answered Dec 17 '20 at 21:28

3

All you need to do is add the dialogs to your module imports & declarations. In the same module where the component your dialogs are declared in is declared.

answered Dec 17 '20 at 21:28

Rharris389

89
8

score 2 · Answer 3 · answered Jul 14 '20 at 16:37

I am posting this hoping that someone may find it useful. This is not the exact answer for this problem, but this is how I overcome my scenario. In my case I was using mat-dialog component as an entry component inside the app.module.ts

 entryComponents: [ErrorComponent, UserAccountInfoReloadPopupDialogComponent],

For some reason, ng-if it is not working inside the dialog. It is not only for ng-if, all others like ng-for were not available.

I fixed the issue by defining both components in the same ts file.

@Component({
  selector: "app-account-info",
  templateUrl: "./account-info.component.html",
  styleUrls: ["./account-info.component.css"],
})
export class AccountInfoComponent implements OnInit {
//code
}

@Component({
  selector: "user-account-info-reload-popup-dialog",
  templateUrl: "./payment-modal.component.html",
  styleUrls: ["./payment-modal.component.css"],
})
export class UserAccountInfoReloadPopupDialogComponent implements OnInit {
//code
}

Then I defined the newly created mat-dialog component inside angular module declaration.

@NgModule({
  declarations: 
[
UserAccountInfoReloadPopupDialogComponent
],

This fixed my issue. You can check the angular mat-dialog documentation. https://material.angular.io/components/dialog/overview

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

3 Answers3