CdkDialog

npm install @angular/cdk

import {DialogModule} from '@angular/cdk/dialog';

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

@Component({
  selector: 'app-simple-dialog',
  template: '<p>This is a dialog!</p><button (click)="close()">Close</button>',
})
export class SimpleDialogComponent {
  dialogRef = inject(DialogRef);

  close() {
    this.dialogRef.close('result');
  }
}

@Component({
  selector: 'app-main',
  template: '<button (click)="openDialog()">Open Dialog</button>',
})
export class MainComponent {
  private dialog = inject(Dialog);

  openDialog() {
    const dialogRef = this.dialog.open(SimpleDialogComponent);
    
    dialogRef.closed.subscribe(result => {
      console.log('Dialog closed with:', result);
    });
  }
}

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

@Component({
  template: `
    <h2>{{ data.title }}</h2>
    <p>{{ data.message }}</p>
    <button (click)="close()">OK</button>
  `,
})
export class DataDialogComponent {
  dialogRef = inject(DialogRef);
  data = inject(DIALOG_DATA);
}

// Open with data
this.dialog.open(DataDialogComponent, {
  data: {
    title: 'Confirmation',
    message: 'Are you sure?'
  }
});

this.dialog.open(MyDialogComponent, {
  width: '400px',
  height: '300px',
  hasBackdrop: true,
  backdropClass: 'custom-backdrop',
  panelClass: 'custom-panel',
  disableClose: true,  // Prevent closing on backdrop click
  closeOnNavigation: true,
  data: {/* ... */}
});