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