Angular Dialog css styles not applied

Question

I try to start MatDialog on button press in my application with https://material.angular.io/components/dialog/overview.

When I start dialog it appears something like this:

But according the documentation it should look like this:

As you can see in my application it has wrong styles as well as initial button is not highlighting

I use "@angular/material": "^15.2.0" ...

Also I have the following:

<h1 mat-dialog-title>Delete file</h1>
<div mat-dialog-content>
  <p>
    Would you like to delete the following files ?
  </p>
  <div *ngFor="let audioFile of data.audioFileNames">
    {{audioFile}}
  </div>
</div>
<div mat-dialog-actions>
  <button id="delete-no" mat-button mat-dialog-close
          (click)="onNoClick()">No</button>
  <button id="delete-yes" mat-button mat-dialog-close cdkFocusInitial
          (click)="onYesClick()">Yes</button>
</div>

Have somebody faced with the same issue ? What have I missed ?

Answer 1

Please check out imports section of your app.module or your standalone module in case you are using standalone modules feature. Make sure you have imported CommonModule and especially MatDialogModule.