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

Question

I am trying to create a login form using angular-material. I am using @angular/material": "^7.3.0.

In app.module.ts i have imported the following and placed them in the imports array as well,

import {
  MatToolbarModule, MatFormFieldModule, MatInputModule,
  MatOptionModule, MatSelectModule, MatIconModule, 
  MatButtonModule, MatCardModule, MatTableModule,
  MatDividerModule, MatSnackBarModule
} from '@angular/material';

In message.components.ts i have the following

import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material';
import { Component, OnInit, Inject, Injectable } from '@angular/core';

@Component({
  selector: 'app-message',
  templateUrl: './message.component.html',
  styleUrls: ['./message.component.css']
})

export class MessageComponent implements OnInit {
  constructor(private dialogRef: MatDialogRef<MessageComponent>, 
               @Inject(MAT_DIALOG_DATA) public data: any) {
          }
          public closeMe() {
            this.dialogRef.close();
          }
          ngOnInit() {
          }
        }

In my template message.component.html i have,

<h1 mat-dialog-title>Message</h1>
<mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions>
  <button mat-raised-button (click)="closeMe()">Close</button>
</mat-dialog-actions>

I am getting the errors for mat-dialog-actions & mat-dialog-content,

'mat-dialog-content' is not a known element:
'mat-dialog-actions' is not a known element:

As per the documentation angular-material both directives are available. What could be wrong in the code ? Thank you in advance.

Answer 1

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.

Answer 2

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 { }

Answer 3

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.