Art Modal

Art Modal is an easy-to-use library.

DEMO: coming soon

Install

$ npm i art-modal

How to use

1: Import the ArtModalServiceModule into your app.module

import { ArtModalServiceModule } from 'art-modal';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    ArtModalServiceModule.forRoot()
  ],
  providers: [...],
})
export class AppModule { }

2: Create a component and extend the ArtModal class

note: Create your modal with 1040 z-index

import { Component, OnInit } from  '@angular/core';
import { ArtModal } from  'art-modal';

@Component({...})

export  class  ModalExample  extends  ArtModal {
	public  title: string;
	public  message: string;

	constructor() { }

	onInjectInputs(inputs): void {
		this.title = inputs.title;
		this.message = inputs.message;
	}

	save(): void {
		this.close('save');
	}

	cancel(): void {
		this.dismiss('canceling');
	}
}

3: In the app.component, inject the ArtModalService

import { Component } from  '@angular/core';
import { ModalExample } from  './modal/modal-example.component';
import { ArtModalService } from  'art-modal';

@Component({ ... })

export  class  AppComponent {

	constructor(private  modalService: ArtModalService) { }

	showModal() {
		const  modalRef = this.modalService.open(
		ModalExample, // Import the modal component here
		{ title:  'Title', message:  'message' });

		modalRef.onResult().subscribe(
			success  =>  console.log(success),
			dismissed  =>  console.log('dismissed'));
	}
}