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:

import {NgModule} from '@angular/core';
import {MarzetzDialogModule} from 'marzetz-dialog';

@NgModule({
	imports: [
    	// ...
        MarzetzDialogModule
    ],
	// ...
})
export class AppModule {}

Add the appMarzetzDialog directive on one of the main containers inside your app:

import {Component} from '@angular/core';

@Component({
    selector: 'app-main',
    template: `
        <div appMarzetzDialog></div>
    `
})

Init your dialog:

import {Component, OnInit} from '@angular/core';
import {MarzetzDialogInternal, MarzetzDialogService, MarzetzDialogOptions} from 'marzetz-dialog';
import {SomeComponent} from './component';

@Component({
    selector: 'app-main',
    template: `
        <div appMarzetzDialog></div>
    `
})

export class AppMain implements OnInit {
    public dialogOne: MarzetzDialogInternal;
    
    private dialogOneOptions: MarzetzDialogOptions = {
        customComponent: SomeComponent,
        customBodyClass: 'custom-class-for-body'
    };
    
    constructor(private marzetzDialogService: MarzetzDialogService) {
    }
    
    ngOnInit() {
        this.dialogOne = this.marzetzDialogService.init(this.dialogOneOptions)
    }
}

Open and close your dialog:

import {Component, OnInit} from '@angular/core';
import {MarzetzDialogInternal, MarzetzDialogService, MarzetzDialogOptions} from 'marzetz-dialog';
import {SomeComponent} from './component';

@Component({
    selector: 'app-main',
    template: `
        <div appMarzetzDialog>
            <button (click)="openMyDialog()">Open dialog</button>
        </div>
    `
})

export class AppMain implements OnInit {
    public dialogOne: MarzetzDialogInternal;
    
    private dialogOneOptions: MarzetzDialogOptions = {
        customComponent: SomeComponent,
        customBodyClass: 'custom-class-for-body'
    };
    
    constructor(private marzetzDialogService: MarzetzDialogService) {
    }
    
    ngOnInit() {
        this.dialogOne = this.marzetzDialogService.init(this.dialogOneOptions)
    }
    
    public openMyDialog() {
        this.marzetzDialogService.open(this.dialogOne._index);
    }
    
    public closeMyDialog() {
        this.marzetzDialogService.close(this.dialogOne._index);
    }
}

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