MarzetzDialog
MarzetzDialog can show custom popups in any Angular app.
Built with Angular 5.2.8
Demo
Installation
npm install --save marzetz-dialog
Getting Started
Import the MarzetzDialogModule
in your root application module:
;;
Add the appMarzetzDialog
directive on one of the main containers inside your app:
;
Init your dialog:
;;;
Open and close your dialog:
;;;
Options and available methods
MarzetzDialogService
methods:
Method | Description |
---|---|
init(options?: MarzetzDialogOptions) |
Inits new dialog and then returns its MarzetzDialogInternal setup. Argument options is not required. |
open(index: number) |
Opens dialog if it was initiated earlier. Argument index is required, it can be received from MarzetzDialogInternal object. |
close(index: number) |
Closes dialog. Argument index is mandatory. |
closeAll() |
Closes all opened dialogs. |
destroy(index: number) |
Destroys dialog. Argument index is mandatory. |
destroyAll() |
Destroys all dialogs. |
MarzetzDialogOptions
:
You can override dialog defaults with your own options. It can be done by passing argument of type MarzetzDialogOptions
into MarzetzDialogService
init
method.
Option | Type | Default | Desctiption |
---|---|---|---|
addBodyClass |
boolean |
true |
If true specified or default class will be added to html body element when popup is opened. This class is removed while dialog is being closed. |
customBodyClass |
string |
'marzetz-dialog-opened' |
The css class that would be added to html body element whilst dialog is being opened. |
customComponent |
any (your component) |
null |
Custom component to inject into dialog on init. You should also add it to entryComponents in your main module. |
customContent |
string (html) |
null |
The content to show inside dialog. Use it if you want to create simple alert/info popup. |
animation |
string |
'normal' |
The animation that will be applied on dialog. Supported values: 'normal' , 'bounceIn' and 'error' . |
Credits
- Inspired by angularjs ngDialog module: https://github.com/likeastore/ngDialog
TODO
- Unit & E2E test
- Add more animations
LICENSE
This project is licensed under the MIT license. LICENSE