@crystalui/angular-modal

Modal for Angular 2

This module allows for show modal and dialog boxes.

Demo

http://crystalui.org/components/modal

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

name	description
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().

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