Error 'mat-dialog-content' is not a known element

I Agree with Jonathan Answer I am adding full details with example with sample code:

it will also resolve issues with error: mat-dialog-actions' is not a known element

Add DataDialogComponent in the declarations, and in entryComponents of app.module.ts

 import {MatDialogModule } from '@angular/material/dialog';


   @NgModule({
    declarations: [
       AppComponent,
       MatDialogModule
    ],
    imports: [
       BrowserModule,
       AppRoutingModule,
       BrowserAnimationsModule,
       ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
       LayoutModule,

    ],
    providers: [],
    entryComponents:[MatDialogModule],
    bootstrap: [AppComponent]
    })
export class AppModule { }

It looks like you forgot to import the MatDialogModule into your AppModule (at least I don't see it in the list of imports provided).
For future reference, the first line of the API documentation tab will tell you the module(s) you need to import.


First, You need to make sure that imported the MatDialogModule into your AppModule.

You can do both:

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

Or

<mat-dialog-content></mat-dialog-content>
<mat-dialog-actions></mat-dialog-actions>

If you look at the source of components/src/material/dialog/dialog-module.ts in Angular Materials git repo, it exports the following directives.

import {
  MatDialogActions,
  MatDialogClose,
  MatDialogContent,
  MatDialogTitle,
} from './dialog-content-directives';

exports: [
    ...
    MatDialogClose,
    MatDialogTitle,
    MatDialogContent,
    MatDialogActions,
    ...
  ]

and with following similar declaration for each directive in ~/dialog-content-directives.ts

@Directive({
  selector: `[mat-dialog-content], mat-dialog-content, [matDialogContent]`,
  host: {'class': 'mat-dialog-content'}
})
export class MatDialogContent {}

If the problem persists, then try the following

npm cache clean --force

Then run your project again.


For me, this was caused because I had not yet added my module that used the dialog into the routes of a parent module. (I am lazily loading using import())

So effectively, this module was not net a part of the angular app, because it had not yet been imported by any other modules of the app.