File
Metadata
changeDetection |
ChangeDetectionStrategy.OnPush |
selector |
mav-confirmation-dialog |
styleUrls |
./confirmation-dialog.component.scss |
templateUrl |
./confirmation-dialog.component.html |
Readonly
acceptText
|
Type : string
|
|
Readonly
cancelText
|
Type : string
|
|
Readonly
content
|
Type : string
|
|
import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
export interface ConfirmationDialogOptions {
title: string;
content: string;
acceptText?: string;
cancelText?: string;
}
@Component({
selector: 'mav-confirmation-dialog',
templateUrl: './confirmation-dialog.component.html',
styleUrls: ['./confirmation-dialog.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ConfirmationDialogComponent {
readonly title: string;
readonly content: string;
readonly acceptText: string;
readonly cancelText: string;
constructor(@Inject(MAT_DIALOG_DATA) options: ConfirmationDialogOptions) {
({
title: this.title,
content: this.content,
acceptText: this.acceptText = 'Confirm',
cancelText: this.cancelText = 'Cancel'
} = options);
}
}
<h2 mat-dialog-title>{{ title }}</h2>
<mat-dialog-content>{{ content }}</mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button [mat-dialog-close]="false">{{ cancelText }}</button>
<button mat-button [mat-dialog-close]="true" cdkFocusInitial>{{ acceptText }}</button>
</mat-dialog-actions>
:host {
display: block;
}
Legend
Html element with directive