Modal

A simple lightweight modal implementation for FalakJS.

Installation

flk install flk-modal

Table of contents

• Modal
• Installation
• Table of contents
• Usage
  • Using the close event
• Available attributes
• Configurations

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. |