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