Platform: Modal Technical Design

Modal Component

Summary

The modal is used as a container to be displayed in response to an action. It is commonly used to collect simple information with a short form, to get confirmation or display contextual information that does not require a page. The modal interrupts a current app process to prompt the user for information or to complete a short-term task. It’s a secondary window above the app, allowing the user to stay within the context of the current process. It requires users to make a decision or complete an action before they can continue.

Design

<fdp-modal [resizeable]="true" [backdrop]="true" [closeOnescape]="true">
 <fdp-modal-header [title]="Modal title" [icon]="cart" (modalClosed)="onModalClose()" [closeable]="true"></fdp-modal-header>
   <fdp-modal-body>
      <ng-template>
        <span>Modal Content Goes here.......</span>
      </ng-template>
   </fdp-modal-body>
 <fdp-modal-footer [showseparator]="true" [actions]="actions" (onModalAction)="onModalaction($event)"></fdp-modal-footer>
</fdp-modal>

Property Bindings

resizeable: boolean

The 'resizeable' property allows to set the resize modal.

backdrop: boolean

The 'backdrop' property allows to set the backdrop option for the modal.

'closeOnescape:boolean'

The 'closeOnescape' used to option to close the modal on pressing of escape key.

title: string

The 'title' property allows the user to set the Modal title.

icon: string

The 'icon' property allows the user to configure any icons in the modal header.

closeable: boolean

The 'closeable' property allows the user to set is modal can be close?

showseparator: boolean

showseparator allows the user to set separator line between the modal body and nodal footer,

actions: Action[]

actions allows to configure set of actions can taken on modal.

---

Event Bindings

modalClosed: EventEmitter<void>

On clicking of close icon on modal header , Modal should close.

'onModalAction:EventEmitter'

On clicking of any action button on the modal footer.

Interfaces

ActionItem

export interface ActionItem {
                label: string, // specifies the action label
                type: string,  // action button type
                priority: number,// priority of the action 
                options: 'string' // option for the action button
}

Comments

Kevin:

• I would not use actions. My preference is to use "content projection" to add button actions to the footer. It's more flexible and it's easier to apply localization:

<fdp-modal>
 <fdp-modal-header [title]="Modal title" [icon]="cart" (modalClosed)="onModalClose()" [closeable]="true"></fdp-modal-header>
   <fdp-modal-body>
      <ng-template>
        <span>Modal Content Goes here.......</span>
      </ng-template>
   </fdp-modal-body>
   <fdp-modal-footer [showseparator]="true">
      <button (click)="onCancel()" i18n="Cancel button text">Cancel</button>
      <button (click)="onSubmit()" i18n="Submit button text">Submit</button>
   </fdp-modal-footer>
</fdp-modal>

• Consider adding external open and close methods to the modal component, so that application controller can open the model from some other application event.

   @ViewChild('myModal') myModal: ModalComponent; // application creates reference to modal component
   ...
   ...
   // somewhere in application controller code ...
   startUpdateOfUserData() {
      this.myModal.open();
   }

   endUpdateOfUserData(data: any) {
      this.updateUserService.update(data).subscribe(res => {
         // do some stuff
         ...
         // then close the modal
         this.myModal.close();
      });
   }

Frank:

What is the added value compared core modal? How would you use it in the application, other than with Service ?