File

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

Description

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

Metadata

Index

Properties
Methods

Constructor

Public constructor(dialogRef: MatDialogRef<StarkPromptDialogComponent | StarkPromptDialogResult>, content: StarkPromptDialogContent)

Class constructor provided text is defined in the translation keys)

Parameters :
Name Type Optional Description
dialogRef MatDialogRef<StarkPromptDialogComponent | StarkPromptDialogResult> No
  • Reference this dialog instance
content StarkPromptDialogContent No
  • Content to be shown in the prompt dialog (dynamically translated via the [@link TranslateService} service if the provided text is defined in the translation keys)

Methods

Public onCancel
onCancel()

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

Returns : void
Public onOk
onOk()

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

Returns : void

Properties

Public content
Type : StarkPromptDialogContent
Decorators :
@Inject(MAT_DIALOG_DATA)
- Content to be shown in the prompt dialog (dynamically translated via the [@link TranslateService} service if the provided text is defined in the translation keys)
Public dialogRef
Type : MatDialogRef<StarkPromptDialogComponent | StarkPromptDialogResult>
- Reference this dialog instance
import { ChangeDetectionStrategy, Component, Inject, ViewEncapsulation } from "@angular/core";
import { UntypedFormControl } from "@angular/forms";
import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef } from "@angular/material/legacy-dialog";
import { StarkPromptDialogContent } from "./prompt-dialog-content.intf";

/**
 * Possible results of the {@link StarkPromptDialogComponent} after being closed.
 *
 * - `string`: The value provided by the user in the dialog's input after clicking the "Ok" button.
 * - "cancel": The dialog was cancelled by clicking on the "Cancel" button
 * - `undefined`: The dialog was cancelled either by clicking outside of dialog or by pressing the ESC key
 */
export type StarkPromptDialogResult = string | "cancel" | undefined;

/**
 * Prompt dialog component to be opened via the Angular Material's {@link MatDialog} service
 */
@Component({
	selector: "stark-prompt-dialog",
	templateUrl: "./prompt-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-prompt-dialog"
	}
})
export class StarkPromptDialogComponent {
	/**
	 * @ignore
	 */
	public formControl: UntypedFormControl;

	/**
	 * Class constructor
	 * @param dialogRef - Reference this dialog instance
	 * @param content - Content to be shown in the prompt dialog (dynamically translated via the [@link TranslateService} service if the
	 * provided text is defined in the translation keys)
	 */
	public constructor(
		public dialogRef: MatDialogRef<StarkPromptDialogComponent, StarkPromptDialogResult>,
		@Inject(MAT_DIALOG_DATA) public content: StarkPromptDialogContent
	) {
		this.formControl = new UntypedFormControl(this.content.initialValue);
	}

	/**
	 * Callback method to be triggered when the "Cancel" button is clicked
	 */
	public onCancel(): void {
		this.dialogRef.close("cancel");
	}

	/**
	 * Callback method to be triggered when the "Ok" button is clicked
	 */
	public onOk(): void {
		this.dialogRef.close(this.formControl.value);
	}
}
<h2 mat-dialog-title>{{ content.title || "" | translate }}</h2>

<div mat-dialog-content>
	<span class="mat-caption">{{ content.textContent || "" | translate }}</span>

	<mat-form-field class="prompt-text">
		<mat-label translate>{{ content.label || content.placeholder }}</mat-label>
		<input matInput [placeholder]="content.placeholder || '' | translate" [formControl]="formControl" />
	</mat-form-field>
</div>

<div mat-dialog-actions>
	<button mat-button class="button-cancel" (click)="onCancel()">{{ content.cancel || "CANCEL" | translate }}</button>
	<button mat-raised-button class="button-ok" (click)="onOk()" [disabled]="!formControl.value">
		{{ content.ok || "OK" | translate }}
	</button>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""