title: Angular Material: 'mat-dialog-content' is not a known element
body: <p><em>Before marking this question as "duplicate", kindly hear me out since I'm stuck for hours with this problem. I've gone through the existing questions but could not find any solution.</em></p>
  
  <p>I'm learning Angular and have started with Angular 9+ and Angular Material. I'm trying to implement a simple dialog of Angular Material by reading the documentation from the <a href="https://material.angular.io/components/dialog/overview" rel="noreferrer">official page</a>.</p>
  
  <p>My code closely follows the example code but I'm at a loss on why I'm still getting this error messages:</p>
  
  <pre><code>'mat-dialog-content' is not a known element.
  'mat-dialog-actions' is not a known element.
  </code></pre>
  
  <p>The dialog does show up but it looks as if no Angular Material components / directives are being rendered at all in the dialog template html. Even if I use <code>&lt;button mat-button&gt;Button&lt;/button&gt;</code>, it would be rendered as a normal button and not an Angular Material button. Everything else which is not in the dialog template works perfectly fine. I have no idea what I'm doing wrong here, but if anyone could point me out my mistake, that'd be great!</p>
  
  <p><code>app.module.ts</code>: (I'm importing the <code>MatDialogModule</code>)</p>
  
  <pre><code>...
  import { MatDialogModule } from '@angular/material/dialog';
  
  @NgModule({
      declarations: [
          ...
      ],
      imports: [
          ...
          MatDialogModule
      ],
      providers: [],
      bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><code>mycomponent.ts</code>:</p>
  
  <pre><code>import { Component, OnInit, ViewChild, Inject } from '@angular/core';
  import { MatDialog, MatDialogModule, MAT_DIALOG_DATA, MatDialogConfig } from '@angular/material/dialog';
  ...
  
  @Component({
    selector: 'app-my',
    templateUrl: './my.component.html',
    styleUrls: ['./my.component.css']
  })
  export class MyComponent implements OnInit {
  
      constructor(public dataDialogHandler: MatDialog) {}
  
      ngOnInit(): void {}
  
      public openDataDialog(): void {
  
          const dialogConfig = new MatDialogConfig();
  
          dialogConfig.data = {};
  
          this.dataDialogHandler.open(DataDialogComponent, dialogConfig);
      }
  }
  
  @Component({
      selector: 'data-dialog',
      templateUrl: './data-dialog.html'
  })
  export class DataDialogComponent {
  
      constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
  }
  
  export interface DialogData {}
  </code></pre>
  
  <p><code>data-dialog.html</code>:</p>
  
  <pre><code>&lt;h2 mat-dialog-title&gt;some title&lt;/h2&gt;
  &lt;mat-dialog-content&gt;
      &lt;p&gt;dialog works&lt;/p&gt;
  &lt;/mat-dialog-content&gt;
  &lt;mat-dialog-actions align="end"&gt;
      &lt;button mat-button mat-dialog-close&gt;Close&lt;/button&gt;
  &lt;/mat-dialog-actions&gt;
  </code></pre>
  
  <p>and finally, in <code>my.component.html</code>:</p>
  
  <pre><code>&lt;button mat-button (click)="openDataDialog()"&gt;View Dialog&lt;/button&gt;
  </code></pre>
  
  <p>What am I doing wrong here? Thanks in advance!</p>
  
  <pre><code>@angular/core 9.0.7
  @angular/cdk 9.1.3
  @angular/material 9.1.3
  typescript 3.7.5
  </code></pre>