File

projects/make-a-vis/src/lib/shared/components/confirmation-dialog/confirmation-dialog.component.ts

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector mav-confirmation-dialog
styleUrls ./confirmation-dialog.component.scss
templateUrl ./confirmation-dialog.component.html

Index

Properties

Constructor

constructor(options: ConfirmationDialogOptions)
Parameters :
Name Type Optional
options ConfirmationDialogOptions No

Properties

Readonly acceptText
Type : string
Readonly cancelText
Type : string
Readonly content
Type : string
Readonly title
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>

./confirmation-dialog.component.scss

:host {
  display: block;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""