@cleavelandprice/dialog NPM

@cleavelandprice/dialog

Dialog is an Angular 12+ library providing foundational functionality to Cleaveland/Price applications.

Installation

To install this library, run:

$ npm install @cleavelandprice/dialog

Prerequisites

This library requires Angular Material/CDK. To add the prerequisite , run the following:

ng add @angular/material

Consuming Dialog

After installing the Dialog package, the dialog module must be imported in your AppModule file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DialogModule } from '@cleavelandprice/dialog';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    DialogModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The dialog module provides a simple way to display 3 types of dialog boxes built with Angular Material components:

Message Box displays a message to the user.
The only button displayed is an OK button.
Confirmation Box displays a simple question for the user and returns a true/false value indicating which button they selected.
The buttons can be of the following types: Ok/Cancel (default option), Yes/No, True/False, 'Custom'.
Regardless of which option is selected by the developer, it will always return a true/false value, with Ok, Yes, True = true and Cancel, No, False = false. If ConfirmationDialogMode is set to Custom, then you need to pass in a string array property called customTrueFalseText, with the first element being the text for the True button, and the second being the text for the False button.
Input Box displays a dialog box with an input field that the user can type into.
The user can then click Ok, or Cancel.
The developer may provide a placeholder for the input field.

All three types of dialogs allow the developer to specify the Title and the Message to be displayed. Additionally, the developer may optionally provide a message to be displayed via a checkbox. If the checkboxMessage is provided, then the dialog box will include a checkbox at the bottom and the value (true/false) will be returned to the calling code. This also applies to dialogs of type Message Box - which otherwise doesn't return a value. Once the value is returned, it's up to the developer to decide what to do with the checkbox value. Typically, this is used for options like Don't show me this message in the future, etc.

To prevent the user from closing the dialog without responding (i.e. clicking outside of the dialog), simply pass in the optional disableClose parameter provided by Angular Material (this is native functionality provided by Angular).

import { MatDialog } from '@angular/material/dialog';
import {
  ConfirmationComponent,
  ConfirmationMode,
  InputComponent,
  MessageComponent
} from '@cleavelandprice/dialog';
@Component({
  selector: 'app-dialogs',
  template: `
    <input type="text" [(ngModel)]="title">
    <input type="text" [(ngModel)]="message">
    <input type="text" [(ngModel)]="checkboxMessage">
    <input type="text" [(ngModel)]="placeholder">
  `
})
export class DialogsComponent {
  confirmationMode = ConfirmationDialogMode.OkCancel;
  title: string;
  message: string;
  checkboxMessage: string; // Optional
  placeholder: string; // For input box
  disableClose = false; // Optional Angular Material option to specify modal

  // MatDialog provided by Angular Material
  constructor(public dialog: MatDialog) { }

  messageBox(): void {
    this.dialog
      .open(MessageComponent, {
        data: {
          title: this.title,
          message: this.message,
          checkboxMessage: this.checkboxMessage
        },
        disableClose: this.disableClose
      })
      .afterClosed()
      .subscribe(response => {
        if (this.checkboxMessage) {
          console.log(response);
        }
      });
  }

  confirmationBox(): void {
    this.dialog
      .open(ConfirmationComponent, {
        data: {
          title: this.title,
          message: this.message,
          checkboxMessage: this.checkboxMessage,
          mode: this.confirmationMode
        },
        disableClose: this.disableClose
      })
      .afterClosed()
      .subscribe(response => console.log(response));
  }

  inputBox(): void {
    this.dialog
      .open(InputComponent, {
        data: {
          title: this.title,
          message: this.message,
          checkboxMessage: this.checkboxMessage,
          placeholder: this.placeholder
        },
        disableClose: this.disableClose
      })
      .afterClosed()
      .subscribe(response => console.log(response));
  }
}