NgxMatDialog

Type-safe Angular Material Dialogs Directive for Angular

Installation

npm install ngx-mat-dialog

Usage

import { MatDialogDirective } from "ngx-mat-dialog";

@Component({
  selector: "dialog-overview-example",
  templateUrl: "dialog-overview-example.html",
  standalone: true,
  imports: [MatDialogDirective, DialogOverviewExampleDialog],
})
export class DialogOverviewExample {
  name = "";
  animal = "";
  visible = false;

  openDialog() {
    this.visible = true;
  }
}

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

<ng-template matDialog [(matDialogVisible)]="visible">
  <dialog-overview-example-dialog
    [name]="name"
    [(animal)]="animal"
  ></dialog-overview-example-dialog>
</ng-template>

Note: You can't use shorthand syntax like *matDialog, because it doesn't support @Output(). As a result, you cannot listen to the visibility changes of the dialog.

Note: Avoid using MatDialogConfig.data to pass data to the dialog and retrieve dialogResult from the MatDialogRef.close. Instead, use @Input() and @Output() for type safety.

API

Selector: [matDialog]

Exported as: matDialog

Properties

| Input | Description | | --------------------------------------------------------- | ----------------------------------------- | | @Input() matDialogVisible: boolean; | Whether the dialog is visible. | | @Input() matDialogConfig: MatDialogConfig<undefined>; | Configuration for the dialog. | | @Output() matDialogVisibleChange: EventEmitter<boolean> | Emits when the dialog visibility changes. | | dialogRef: null \| MatDialogRef<unknown, void> | Reference to the MatDialogRef. |