Angular mat-button style is not apllied in mat-dialog

Question

I have a project Angular 9. All works fine, but when mat-dialog is opened it contains a couple of buttons. And material-style is not applied to these buttons. I wonder why. The problem exists only an mat-dialog window. In other pages all works fine: mat-button style is applied correctly. Couldn't you help me with this issue?

Code enrollments.component.ts:

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { Enrollment } from './enrollment';
import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-dialog-printdocs',
  templateUrl: './dialogprintdocs.component.html'
})
export class DialogPrintDocsComponent { }

@Component({
  selector: 'app-enrollments',
  templateUrl: './enrollments.component.html',
  styleUrls: ['./enrollments.component.css']
})
export class EnrollmentsComponent implements OnInit {

  public enrollments: Enrollment[];
  public displayedColumns: string[] = ['id', 'date', 'freb', 'print'];

  constructor(
    private dataService: DataService,
    private dialog: MatDialog) { }

  ngOnInit(): void {
    this.loadData();
  }

  loadData(filter: string = null): void {
    this.dataService.getData(filter).subscribe(result => {
      this.enrollments = result;
    }, error => console.error(error));
  }

  openDialog() {
    this.dialog.open(DialogPrintDocsComponent);
  }
}

Code dialogprintdocs.component.html:

<button mat-button>Cancel</button>
<button mat-button>OK</button>

Code app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { EnrollmentsComponent } from './enrollments/enrollments.component';
import { MaterialModule } from './material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    EnrollmentsComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: EnrollmentsComponent, pathMatch: 'full' },
    ]),
    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Code material.module.ts:

import { NgModule } from '@angular/core';
import { MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
    exports: [
        MatTableModule,
        MatInputModule,
        MatIconModule,
        MatDialogModule,
        MatButtonModule
    ]
})
export class MaterialModule { }

Answer 1

Uninstall and try again

Using following commands to uninstall:

npm uninstall -g @angular/cli
npm cache clean --force

Using following commands to re-install:

npm install -g @angular/cli

Answer 2

You forgot to add your DialogPrintDocsComponent to the declarations -array and the entryComponents -array in your module.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { EnrollmentsComponent, DialogPrintDocsComponent } from './enrollments/enrollments.component';
import { MaterialModule } from './material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    EnrollmentsComponent,
    DialogPrintDocsComponent,
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: EnrollmentsComponent, pathMatch: 'full' },
    ]),
    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [ DialogPrintDocsComponent]
})
export class AppModule { }