title: 'mat-dialog-actions' is not a known element in angular material
body: <p>I know this question is duplicate (<a href="https://stackoverflow.com/questions/60789734/angular-material-mat-dialog-content-is-not-a-known-element">this</a>). but I have problem.
  I have added the <code>MatDialogModule</code> in the import section of AppModule.</p>
  <pre><code>@NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      MatDialogModule,
      MatButtonModule,
      AppRoutingModule,
      BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p>Content of my dialog :</p>
  <pre><code>&lt;h2 mat-dialog-title&gt;Install Angular&lt;/h2&gt;
  &lt;mat-dialog-content class=&quot;mat-typography&quot;&gt;
      &lt;h3&gt;Develop across all platforms&lt;/h3&gt;
  &lt;/mat-dialog-content&gt;
  &lt;mat-dialog-actions align=&quot;end&quot;&gt;
      &lt;button mat-button mat-dialog-close&gt;Cancel&lt;/button&gt;
      &lt;button mat-button [mat-dialog-close]=&quot;true&quot; cdkFocusInitial&gt;Install&lt;/button&gt;
  &lt;/mat-dialog-actions&gt;
  </code></pre>
  <p>When I want to open dialog :</p>
  <pre><code>  constructor(public dialog: MatDialog) {}
  
    openDialog() {
      const dialogRef = this.dialog.open(CourseAcitonComponent);
  
      dialogRef.afterClosed().subscribe(result =&gt; {
        console.log(`Dialog result: ${result}`);
      });
    }
  </code></pre>
  <p>I get the following Error :</p>
  <p>1-</p>
  <pre><code>If 'mat-dialog-content' is an Angular component, then verify that it is part of this module.
  </code></pre>
  <p>2-</p>
  <pre><code>Can't bind to 'mat-dialog-close' since it isn't a known property of 'button'.
  &lt;button mat-button [mat-dialog-close]=&quot;true&quot; cdkFocusInitial&gt;Install&lt;/button&gt;
  </code></pre>