Popup Work flow

Bindable Properties

  1. popupMdl

Overview

  • Shows popup based on popup type.

Features/Functionality

  • It can be normal alert box, confirm box, or popup with given data.
  • It wil return promise.
  • Component is responsive.
  • It is cross browser compatible. (IE11, Edge, Firefox, chrome).

Defaults

  • alert:
    • In header, heading and close icon will not display.
    • If no message, lable will display - 'No data to display' in body.
    • In footer, only one button will display. 'OK'
    • closeOnOuterClick: false
  • confirm:
    • In header, heading and close icon will not display.
    • If no message, lable will display - 'No data to display' in body.
    • In footer, two buttons will display. 'OK' and 'CANCEL'
    • closeOnOuterClick: false
  • popup:
    • data:
      • If no data, lable will display - 'No data to display' in body.
      • If !data.header, heading and close icon will not display.
      • If !data.body.length, body will display blank.
      • If !data.footer.buttons.length, buttons will not display
    • type: 'popup'
    • options:
      • options.closeOnOuterClick: false

Breakdown

  • Default will be set.
  • As per method, popup will display.
  • Popup close will give promise.
  • Create instence of the element where the element is going to call.
  • Pass the instence object in bindable property.