src/modules/dialogs/components/alert-dialog.component.ts
Alert dialog component to be opened via the Angular Material's MatDialog service
changeDetection | ChangeDetectionStrategy.OnPush |
encapsulation | ViewEncapsulation.None |
host | { |
selector | stark-alert-dialog |
templateUrl | ./alert-dialog.component.html |
Properties |
Methods |
|
Public
constructor(dialogRef: MatDialogRef<StarkAlertDialogComponent | StarkAlertDialogResult>, content: StarkAlertDialogContent)
|
||||||||||||
Class constructor provided text is defined in the translation keys)
Parameters :
|
Public onOk |
onOk()
|
Callback method to be triggered when the "Ok" button is clicked
Returns :
void
|
Public content |
Type : StarkAlertDialogContent
|
Decorators :
@Inject(MAT_DIALOG_DATA)
|
- Content to be shown in the alert dialog (dynamically translated via the Translate service if the
provided text is defined in the translation keys)
|
Public dialogRef |
Type : MatDialogRef<StarkAlertDialogComponent | StarkAlertDialogResult>
|
- Reference this dialog instance
|
import { ChangeDetectionStrategy, Component, Inject, ViewEncapsulation } from "@angular/core";
import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef } from "@angular/material/legacy-dialog";
import { StarkAlertDialogContent } from "./alert-dialog-content.intf";
/**
* Possible results of the {@link StarkAlertDialogComponent} after being closed.
*
* - "ok": The user clicked on the "Ok" button
* - `undefined`: The dialog was cancelled by either clicking outside of dialog or by pressing the ESC key
*/
export type StarkAlertDialogResult = "ok" | undefined;
/**
* Alert dialog component to be opened via the Angular Material's {@link MatDialog} service
*/
@Component({
selector: "stark-alert-dialog",
templateUrl: "./alert-dialog.component.html",
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
// We need to use host instead of @HostBinding: https://github.com/NationalBankBelgium/stark/issues/664
host: {
class: "stark-alert-dialog"
}
})
export class StarkAlertDialogComponent {
/**
* Class constructor
* @param dialogRef - Reference this dialog instance
* @param content - Content to be shown in the alert dialog (dynamically translated via the Translate service if the
* provided text is defined in the translation keys)
*/
public constructor(
public dialogRef: MatDialogRef<StarkAlertDialogComponent, StarkAlertDialogResult>,
@Inject(MAT_DIALOG_DATA) public content: StarkAlertDialogContent
) {}
/**
* Callback method to be triggered when the "Ok" button is clicked
*/
public onOk(): void {
this.dialogRef.close("ok");
}
}
<h2 mat-dialog-title>
<mat-icon svgIcon="alert"></mat-icon>
<span>{{ content.title || "" | translate }}</span>
</h2>
<div mat-dialog-content>{{ content.textContent || "" | translate }}</div>
<div mat-dialog-actions>
<button mat-raised-button (click)="onOk()" class="button-ok">{{ content.ok || "OK" | translate }}</button>
</div>