'mat-dialog-actions' is not a known element in angular material

Question

I know this question is duplicate (this). but I have problem. I have added the MatDialogModule in the import section of AppModule.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatDialogModule,
    MatButtonModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Content of my dialog :

<h2 mat-dialog-title>Install Angular</h2>
<mat-dialog-content class="mat-typography">
    <h3>Develop across all platforms</h3>
</mat-dialog-content>
<mat-dialog-actions align="end">
    <button mat-button mat-dialog-close>Cancel</button>
    <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Install</button>
</mat-dialog-actions>

When I want to open dialog :

  constructor(public dialog: MatDialog) {}

  openDialog() {
    const dialogRef = this.dialog.open(CourseAcitonComponent);

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }

I get the following Error :

1-

If 'mat-dialog-content' is an Angular component, then verify that it is part of this module.

2-

Can't bind to 'mat-dialog-close' since it isn't a known property of 'button'.
<button mat-button [mat-dialog-close]="true" cdkFocusInitial>Install</button>

Wherever you are calling openDialog method from, is it within appModule context? — alou, Jul 25 '20 at 09:08

score 3 · Answer 1 · answered Jun 15 '21 at 01:45

Just like the example here: https://material.angular.io/components/dialog/overview#dialog-data

@Component({
  selector: 'dialog-data-example-dialog',
  templateUrl: 'dialog-data-example-dialog.html',
})
export class DialogDataExampleDialog {
  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
}

You need to import and add DialogDataExampleDialog in app.module.ts

declarations: [
  AppComponent,
  // ...
  DialogDataExampleDialog // Import and add this line
],

score -1 · Answer 2 · answered Jul 25 '20 at 19:05

mat-dialog-content is a directive, not a component and so should be used as a directive:

<div mat-dialog-content>
   Mycontent
</div>

Angular generates dynamic content inside the dialog element. So we have to add the dialog box class at declarations and entryComponents in the @NgModule in our module.ts file. My app.module.ts

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
   MatDialogModule
  ],
  entryComponents: [
    MatDialogModule
  ],
})

I hope now you can also resolve your problem.

'mat-dialog-actions' is not a known element in angular material

2 Answers2