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>