Modal for Angular 2

This module allows for show modal and dialog boxes.

Basic usage
View on GitHub

Installation

Install the npm package.

npm i @crystalui/angular-modal

Import module:

import {ModalModule} from '@crystalui/angular-modal';

@NgModule({
    imports: [ModalModule]
})

Usage

To open the window, import the Modal service and call the load() method. As a parameter, pass your component. It will be the contents of the window.

import {Modal} from '@crystalui/angular-modal';
import {MyComponent} from './my.component';

public constructor(private modal: Modal) {};

showModal() {
    this.modal.load({
        id: 'my-modal', 
        component: MyComponent
    });
}

Properties

id: string = undefined
The identifier of the window. It will distinguish one window from another.
mode: "desktop" | "mobile" | "dialog" = "desktop"
The type of the window template.
data: any
Any data that needs to be pass to the window. In the window component, you can get them using @Input() modalData: any.
width: string = "800px"
Width of the window.
height: string = "auto"
Height of the window. By default, the height of the window is determined by the height of its content.
maxWidth: string = "calc(100% - 32px)"
Maximum width of the window.
maxHeight: string = "calc(100% - 32px)"
Maximum height of the window.
overlayBackdrop: boolean = true
Whether the window has a backdrop.
backdropClass: string | { [key: string]: any; }
Custom classes for the backdrop. Supports the same syntax as ngClass.
modalClass: string | { [key: string]: any; }
Custom classes for the modal window. Supports the same syntax as ngClass.

Methods

load({id: "my-modal", component: MyComponent})
Shows the modal.
close({id: "my-modal"})
Hides the modal.

Events

Window state changes are available by subscription stateEvents.subscribe().

show
The event is called before the modal appears.
shown
The event is called after the animation of the appearance of the modal.
hide
The event is called before the modal is hidden.
hidden
The event is called after the animation of the modal is hidden.

Browser support

Chrome / Chrome for Android 50+ / Android 4.4+
FireFox
Opera
Safari / iOS Safari 10.1, 11.1 / iOS 9+
Internet Explorer