dynamic-dialog
    TypeScript icon, indicating that this package has built-in type declarations

    1.8.2 • Public • Published

    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.

    Install

    npm i dynamic-dialog

    DownloadsWeekly Downloads

    34

    Version

    1.8.2

    License

    ISC

    Unpacked Size

    378 kB

    Total Files

    42

    Last publish

    Collaborators

    • wavecoders