ya-custom-modal-lib
v0.0.9
Published
Simple, lightweight and configurable modal box component to implemnt your dynamic pop up component.
Downloads
19
Readme
Custom Modal For Angular
Simple, lightweight and configurable modal box component to implemnt your dynamic pop up component.
🧾 Features
- Dynamic injection
- Customization (Size, Color, Content, etc..)
- Multiple modal at once
- Host's component interaction wih model's actions (🆗 button)
- Auto closeable configuration
✨ Installation
npm i ya-custom-modal-lib
🚊 Usage
Three steps and roll out 😀
- Import CustomModalModule to your root AppModule
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CustomModalModule } from 'custom-modal';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CustomModalModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- Inject fallowing two services to component where you want to add custom modal
import { Component, ViewContainerRef } from '@angular/core';
import { ModalService } from 'custom-modal';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(
private modalService: ModalService,
private componentReference: ViewContainerRef
) { }
}
- Create a function and call openModel function in ModalService with custom configuration.(You can pass prefered configuration by using parameters)
import { Component, ViewContainerRef } from '@angular/core';
import { ModalService } from 'custom-modal';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(
private modalService: ModalService,
private componentReference: ViewContainerRef
) { }
onOpenModal() : void{
this.modalService.openModel({
viewContainerRef: this.componentReference,
title: 'one',
height: '500px',
width: '500px',
backgroundColor: '#f00',
bodyText: 'one works!',
closeAfter: 2000
}).subscribe((res) => {
});
}
}
API Reference
openModel({modalConfigurations})
| Parameter | Type | Description |
| :-------- | :------- | :-------------------------------- |
| viewContainerRef
| ViewContainerRef
| Required. Component Reference where need to be added modal |
| title
| string
| Title for modal box |
| bodyText
| string
| Body text for the modal box |
| height
| string
| Height of the modal box |
| backgroundColor
| string
| Background Color (Only applicable CSS colors) |
| closeAfter
| number
| If required auto closeable (milisecond)|