File

src/modules/dialogs/components/alert-dialog.component.ts

Description

Alert dialog component to be opened via the Angular Material's MatDialog service

Metadata

Index

Properties
Methods

Constructor

Public constructor(dialogRef: MatDialogRef<StarkAlertDialogComponent | StarkAlertDialogResult>, content: StarkAlertDialogContent)

Class constructor provided text is defined in the translation keys)

Parameters :
Name Type Optional Description
dialogRef MatDialogRef<StarkAlertDialogComponent | StarkAlertDialogResult> No
  • Reference this dialog instance
content StarkAlertDialogContent No
  • Content to be shown in the alert dialog (dynamically translated via the Translate service if the provided text is defined in the translation keys)

Methods

Public onOk
onOk()

Callback method to be triggered when the "Ok" button is clicked

Returns : void

Properties

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>&nbsp;
	<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>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""