Dynamic Dialog

This Angular Module simplifies the Materail Dialog allowing you to use standard dialogus for alerts, confirm and choice dialogs. You may also inject any content like a form using the same service. No other modules are needed for import.

The resposend from the dialog is a Observable making it easy to implement in complex applications

These dialogs may be used as an inline compoenent or a modal - both respond the same

Installation

npm install dynamic-dialog

Scaffolding

Import the module into your project under imports

imports: [
    BrowserModule,
    AppRoutingModule,
    DynamicDialogModule
  ],

Inputs

The following Inputs are available as a Component (These inputs are not available on Modal types)

Input	Type	Defaut	Description
display	BOOLEAN	FASLE	displays dialog on screen
dialogData	ANY[]	[]	data for options inluding data to be passed for custom dialogs

Outputs

The following Outpus are available as a Component (These inputs are not available on Modal types)

Input	Type	Defaut	Description
dialogClosed	EVENT	ANY	returns data specified for the event selected

Data Structure

dialogData is the data and the options that define the modal - the dialogData is an input for Compoenet type usage

Here is the Model for the data strture that is passed onto the Dialog whether Component types or Modal type

dialogData: any = {
  title: 'Sample Message Title',
  content: 'In this guide let us learn <b>how to make use</b> of @input in Angular.',
  icon: 'warning', 
  iconColor: 'red',
  closeOption: true,
  buttons: {
    action: { name: 'Agree', type: ButtonTypes.PRIMARY, data: true },
    dismiss: { name: 'Disagee', type: ButtonTypes.PLAIN, data: false },
    option: { name: 'Learn More', type: ButtonTypes.PLAIN, data: { url: 'apple.com'} }
  }
}

Property	Type	Defaut	Description
title	STRING	NULL	Title of Dialog - if NULL then no title appears
content	STRING (HTML)	NULL	Content of Dialog - if NULL then no content appears
icon	STRING	NULL	Material Icon left of title - if NULL then no icon appears
iconColor	STRING	NULL	Material Icon color - if NULL then color is black
closeOption	BOOLEAN	FALSE	Top right `X` for dismiss
buttons	Object	-	Button that appear on dialog, described below

Buttons Object describes the Label, Type and data that will be returned if the option is selected. The data property describes the data that the button will return is selected.

There are 3 types of buttons that may be defined and they depend on the dialog type.

Action - this is the positive action
Dismiss - this is the dismiss action
Option - this is the nutral or the negative action

Action and Option buttons may carry a types to define the look, such as a warning

Buttons for Dialog Types

Plain Dialog - will have no bottons ro actions Message Dialog - will only have an action Confirm Dialog - will only have an action and dismiss Choice Dialog - will have an action, dismiss and option Selection Dialog - this is a dropdown selection and will have an action and dismiss Uploader Dialog - this is a file upload and will have an action and dismiss

Property	Type	Defaut	Description
name	STRING	NULL	Label of button
type	ButtonTypes (ENUM)	PLAIN	style and color or button
data	ANY	NULL	data for selected button to return

There are default labels assigned to the Dialog types for the button but they are overidden if provided in the button data property name

Button Types

Property	Description
NONE	No raduis on button
PLAIN	radius on button - white
PRIMARY	radius on button - primary color
ACCENT	Label of button - accent color
WARNING	red button - warn color

Use

To use the following standard dialog types

Plain Dialog

As inline. An input display can force the dialog to appear again. The dialog will be removed when X or a button is selected. Capture return data in the event dialogClosed

<div>

  <wav-dialog-plain
    [display]="display"
    [dialogData]="dialogData"
    (dialogClosed)="displayClosed($event)"
  ></wav-dialog-plain>

  <button mat-raised-button (click)="onDisplayMessage()">Display Inline</button>

</div>

As Modal. Parameteres includes: Component, Data and LockModal (no dismiss outside events) In the floowing example, the X option is removed and the dismiss will occur when user clicks outside of the dialog. In the dialogData buttons have been remmoved since the component type does not require any actions to be displayed.

onMessage() {

  const newData = this.dialogService.openDialog(PlainDialogComponent, this.dialogData, false)

  newData.subscribe(result => {
    console.log('The dialog was closed', result)
  })

}

Message Dialog

As inline. An input display can force the dialog to appear again. The dialog will be removed when X or a button is selected. Capture return data in the event dialogClosed

<div>

  <wav-dialog-message
    [display]="display"
    [dialogData]="dialogData"
    (dialogClosed)="displayClosed($event)"
  ></wav-dialog-message>

  <button mat-raised-button (click)="onDisplayMessage()">Display Inline</button>

</div>

As Modal. Parameteres includes: Component, Data and LockModal (no dismiss outside events)

onMessage() {

  const newData = this.dialogService.openDialog(MessageDialogComponent, this.dialogData, true)

  newData.subscribe(result => {
    console.log('The dialog was closed', result)
  })

}

Confirm Dialog

As inline. An input display can force the dialog to appear again. The dialog will be removed when X or a button is selected. Capture return data in the event dialogClosed

<div>

  <wav-dialog-confirm
    [display]="display"
    [dialogData]="dialogData"
    (dialogClosed)="displayClosed($event)"
  ></wav-dialog-confirm>

  <button mat-raised-button (click)="onDisplayMessage()">Display Inline</button>

</div>

As Modal. Parameteres includes: Component, Data and LockModal (no dismiss outside events)

onConfirmMessage() {

  const newData = this.dialogService.openDialog(ConfirmDialogComponent, this.dialogData, true)

  newData.subscribe(result => {
    console.log('The dialog was closed', result)
  })

}

Choice Dialog

As inline. An input display can force the dialog to appear again. The dialog will be removed when X or a button is selected. Capture return data in the event dialogClosed

<div>

  <wav-dialog-choice
    [display]="display"
    [dialogData]="dialogData"
    (dialogClosed)="displayClosed($event)"
  ></wav-dialog-choice>

  <button mat-raised-button (click)="onDisplayMessage()">Display Inline</button>

</div>

As Modal. Parameteres includes: Component, Data and LockModal (no dismiss outside events)

onConfirmMessage() {

  const newData = this.dialogService.openDialog(ConfirmDialogComponent, this.dialogData, true)

  newData.subscribe(result => {
    console.log('The dialog was closed', result)
  })

}

In all cases the samples above are using the same event handler for the actions taken. Here is a same of the dialogClosed event - this is for Compoent type only

displayClosed(event: any) {
  console.log(event)
  this.display = false
}

Selection Dialog

As inline. An input display can force the dialog to appear again. The dialog will be removed when X or a button is selected. Capture return data in the event dialogClosed

Please note: dialogData has been updated to include details for the selection menu data - more to come! Here is a sample to give you an idea.

Construct an array of menu objects - the menu object would contain the properties for name, service and disabled

The disabled property will enable or disable any menu items The other properties are not used for any controls other then defining what you would like to see and what you would like to return on change event.

const services: { service: string, name: string, disabled: boolean}[] = [
  { name: 'Add all Defaults', service: 'ALL', disabled: false},
  { name: 'Open Id token authentication', service: 'OIDC', disabled: false},
  { name: 'Ping Federation authorization token', service: 'PINGFED', disabled: false},
  { name: 'Supplier Hub vendor authorization token service',service: 'SUPPLIER_HUB', disabled: false},
  { name: 'Vantage authentication token service',service: 'VANTAGE', disabled: false},
  { name: 'Voltage encryption service',service: 'VOLTAGE', disabled: false},
  { name: 'Voltage encryption Lib',service: 'VOLTAGE_KEY', disabled: false},
  { name: 'Custom Entry',service: 'CUSTOM', disabled: false},
]

Then use the data in your selection you pass

dialogSelectionData: any = {
    title: 'Selection Message',
    content: 'Please select the options that apply below',
    icon: 'warning', iconColor: 'red',
    closeOption: true,
    selection: {
      data: services,
      autocomplete: false,
      key: 'name',
      returnKey: 'service',
      displayInput: 'name',
      label: 'Services',
      placeholder: 'OIDC',
      acceptInput: false,
    },
    buttons: {
      action: { name: 'Select', type: ButtonTypes.PRIMARY, data: true },
      dismiss: { name: 'Cancel', type: ButtonTypes.PLAIN, data: false },
    }
  }

<div>

  <wav-dialog-selection
    [display]="display"
    [dialogData]="dialogData"
    (dialogClosed)="displayClosed($event)"
  ></wav-dialog-selection>

  <button mat-raised-button (click)="onDisplaySelection()">Display Inline</button>

</div>

As Modal. Parameteres includes: Component, Data and LockModal (no dismiss outside events)

onSelectionChoice() {

  const newData = this.dialogService.openDialog(SelectionDialogComponent, dialogData, true)

  newData.subscribe(result => {
    console.log('The dialog was closed', result)
  })

}

In all cases the samples above are using the same event handler for the actions taken. Here is a same of the dialogClosed event - this is for Compoent type only

displayClosed(event: any) {
  console.log(event)
  this.display = false
}

Uploader Dialog

As inline. An input display can force the dialog to appear again. The dialog will be removed when X or a button is selected. Capture return data in the event dialogClosed

<div>

  <wav-dialog-uploader
    [display]="display"
    [dialogData]="dialogData"
    (dialogClosed)="displayClosed($event)"
  ></wav-dialog-uploader>

  <button mat-raised-button (click)="onDisplayMessage()">Display Inline</button>

</div>

As Modal. Parameteres includes: Component, Data and LockModal (no dismiss outside events)

onConfirmMessage() {

  const newData = this.dialogService.openDialog(UploaderDialogComponent, this.dialogData, true)

  newData.subscribe(result => {
    console.log('The dialog was closed', result)
  })

}

In all cases the samples above are using the same event handler for the actions taken. Here is a same of the dialogClosed event - this is for Compoent type only

The object returned is the file and base64 data belonging to the selected file

displayClosed(event: any) {
  console.log(event)
  this.display = false
}

Custom Dialog

You can also inject your own cusom components into the dynamic dialog service.

Create the component, with a form for example and prepare the data structure

dialogData: any = {
  title: 'Sample Message Title',
  content: 'In this guide let us learn <b>how to make use</b> of @input in Angular.',
  icon: 'warning', 
  iconColor: 'red',
  closeOption: true,
  buttons: {
    action: { name: 'Agree', type: ButtonTypes.PRIMARY, data: true },
    dismiss: { name: 'Disagee', type: ButtonTypes.PLAIN, data: false },
    option: { name: 'Learn More', type: ButtonTypes.PLAIN, data: { url: 'apple.com'} }
  }
}

For your form, if you want to use the same title, content and close button at top and also the buttons to be used on the bottom of your form, use the components that come with the dynamic-dialog

<!-- DYNAMIC DIALOG -->
<wave-dialog-title
  [title]="'Sample Dialogu Title'"
  [icon]="'info'"
  [iconColor]="'grey'"
  [closeOption]="true"
  (closeDialog)="onDismiss()"
></wave-dialog-title>

<!-- CUSTOM -->
<div [formGroup]="form" fxLayoutGap="8px">
  <mat-form-field appearance="fill" fxFlex>
    <mat-label>First Name</mat-label>
    <input matInput placeholder="John" formControlName="first">
  </mat-form-field>

  <mat-form-field appearance="fill" fxFlex>
    <mat-label>Last Name</mat-label>
    <input matInput placeholder="Smith" formControlName="last">
  </mat-form-field>
</div>

<!-- DYNAMIC DIALOG -->
<wave-dialog-buttons
  [dialogButtons]="buttons"
  [ignoreOption]="false"
  [disableAction]="!form.valid"
  (dialogClosed)="onClose($event)"
></wave-dialog-buttons>

The compoenents ave-dialog-title and wave-dialog-buttons have various inputs for controlling the look and feel that you can use. The wave-dialog-buttons component requires a data object for the buttons to be passed into the dialogButtons input. The (closeDialog) event caputures the close and the (dialogClosed) event captures the close button events and returns the data assigned to the buttons structure.

{
  action: { name: 'Agree', type: ButtonTypes.PRIMARY, data: true },
  dismiss: { name: 'Disagee', type: ButtonTypes.PLAIN, data: false },
  option: { name: 'Learn More', type: ButtonTypes.PLAIN, data: { url: 'apple.com'} }
}

Then inject the service into you component that will promt the dialog

constructor(
  private dialogService: DynamicDialogService
) {}

Inject the component through the service

onConfirmMessage() {

  const newData = this.dialogService.openDialog(ConfirmDialogComponent, this.dialogData, true)

  newData.subscribe(result => {
    console.log('The dialog was closed', result)
  })

}

and the resulting data when the dialog closes will be returned in the Observable that you created for the dialog. Subscribe to it and get the results.

dynamic-dialog

Dynamic Dialog

Installation

Scaffolding

Inputs

Outputs

Data Structure

Buttons for Dialog Types

Button Types

Use

Plain Dialog

Message Dialog

Confirm Dialog

Choice Dialog

Selection Dialog

Uploader Dialog

Custom Dialog

Dependents (0)

Package Sidebar

Install

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

dynamic-dialog

Dynamic Dialog

Installation

Scaffolding

Inputs

Outputs

Data Structure

Buttons for Dialog Types

Button Types

Use

Plain Dialog

Message Dialog

Confirm Dialog

Choice Dialog

Selection Dialog

Uploader Dialog

Custom Dialog

Dependents (0)

Package Sidebar

Install

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads