为什么无法使用 Angular Material CDK 正确显示对话框？

Question

I'm trying to show a dialog in an Angular 15 project. I would like to use the Angular Material Component Development Kit package (I don't use Material components), even following the official documentation and building the examples shown I always have the same problem: the component that should being shown in a modal dialog is added and shown on the page instead. What am I doing wrong?

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DialogModule } from '@angular/cdk/dialog';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, DialogModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.ts:

import { Dialog, DIALOG_DATA } from '@angular/cdk/dialog';
import { Component, Inject } from '@angular/core';

export interface DialogData {
  animal: 'panda' | 'unicorn' | 'lion';
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(public dialog: Dialog) {}

  openDialog() {
    this.dialog.open(CdkDialogDataExampleDialog, {
      minWidth: '300px',
      data: {
        animal: 'panda',
      },
    });
  }
}

@Component({
  selector: 'cdk-dialog-overview-example-dialog',
  templateUrl: './cdk-dialog-overview-example-dialog.html',
  styleUrls: ['./cdk-dialog-overview-example-dialog.css'],
})
export class CdkDialogDataExampleDialog {
  constructor(@Inject(DIALOG_DATA) public data: DialogData) {}
}

app.component.html:

<button (click)="openDialog()">Open dialog</button>

cdk-dialog-overview-example-dialog.html:

<h1>Favorite Animal</h1>
<div>
  My favorite animal is:
  <ul>
    <li><span *ngIf="data.animal === 'panda'">&#10003;</span> Panda</li>
    <li><span *ngIf="data.animal === 'unicorn'">&#10003;</span> Unicorn</li>
    <li><span *ngIf="data.animal === 'lion'">&#10003;</span> Lion</li>
  </ul>
</div>

cdk-dialog-overview-example-dialog.css

:host {
  display: block;
  background: #fff;
  border-radius: 8px;
  padding: 8px 16px;
}

Answer 1

As said from @Eliseo in his comment, I forgot to include @import '@angular/cdk/overlay-prebuilt.css' in my style.css .