# 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>
```

## With footer actions

```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>