Version:

Install ​

shell
npm i @mate-angular/dialog

Import ​

typescript
import { MateDialogComponent, MateDialogContentDirective, MateDialogFooterDirective } from '@mate-angular/dialog';
import { MateButtonComponent } from '@mate-angular/button';

Variants ​

Small ​

html
<mate-button-ng (click)="dialog.open()">Open</mate-button-ng>
<mate-dialog-ng #dialog headerTitle="Small dialog" theme="small">
  <ng-template mateDialogContent>
    <p>Content</p>
  </ng-template>
</mate-dialog-ng>

Medium ​

html
<mate-dialog-ng #dialog headerTitle="Medium dialog" theme="medium">
  <ng-template mateDialogContent>
    <p>Content</p>
  </ng-template>
</mate-dialog-ng>

Large ​

html
<mate-dialog-ng #dialog headerTitle="Large dialog" theme="large">
  <ng-template mateDialogContent>
    <p>Content</p>
  </ng-template>
</mate-dialog-ng>
html
<mate-dialog-ng #dialog headerTitle="Delete records?">
  <ng-template mateDialogContent>
    <p>This action cannot be undone.</p>
  </ng-template>
  <ng-template mateDialogFooter>
    <mate-button-ng (click)="dialog.close()">Cancel</mate-button-ng>
    <mate-button-ng theme="error primary" (click)="onDelete(dialog)">Delete</mate-button-ng>
  </ng-template>
</mate-dialog-ng>