@flk/modal NPM

Modal

A simple lightweight modal implementation for FalakJS.

Installation

flk install flk-modal

Usage

In any component you want to use the modal, just include it with an if statement.

home-page.component.html

<h1>Home sweet home</h1>

<flk-modal *if="this.showProfile" header="My profile info">
  <!-- Modal body here -->
</flk-modal>

Using the close event

As the *if statement is used to initialize the modal component, we need to tell the component when it closes to change our if criteria so the modal no longer be opened.

close event handles this case.

home-page.component.html

<h1>Home sweet home</h1>

<flk-modal *if="this.showProfile" (close)="this.showProfile = null" header="My profile info">
  <!-- Modal body here -->
</flk-modal>

So when the modal is closed, it changes our opening condition to be null thus the modal no longer is opened until the condition showProfile is set to true again.

The header attribute is used to set the modal header text, it could be used as a static attribute header="header text" or a dynamic attribute [header]="this.profileHeader".

Available attributes

Here is the full list of attributes

Attribute	Type	Default value	Description
header	option	`N/a`	Modal header text.
id	option	`Random string`	Modal id for more control.
class	option	`Random string`	The class is passed to the `modal content` wrapper.
close-keyboard	prop	`true`	If set to true, the modal will be closed when the user presses `esc` key.
close-btn	prop	`true`	If set to true, the modal will be closed when the user clicks on the top `close` icon.
close-backdrop	prop	`true`	If set to true, the modal will be closed when the user presses on the dimmed overlay.
theme	prop	`default`	Default theme is white modal, available options `default`, `dark`, `dark-transparent`.

Configurations

The following list could be set as default value in the config.js file

Main Configuration key: modal

key	Type	Default value	Description
keyboard	`Boolean`	true	Close the modal when user presses the `esc` key.
closeBtn	`boolean`	true	Close the modal when user click on the `close` icon.
backdrop	`boolean`	true	Close the modal when the user presses on the dimmed overlay. icon.
theme	`string`	default	Modal theme, available options `default`, `dark`, `dark-transparent`.