Modal

This library help to construct modal dialog

Predicat

Import bootstrap in your project angular in angular.json

  "styles": [
               "src/styles.css",
               "node_modules/bootstrap/dist/css/bootstrap.min.css"
             ]

or in style.css

     @import "~bootstrap/dist/css/bootstrap.min.css";

Objects

ModalController

Is interface to control the modal

  export class ModalController {
     enable?: boolean; //enable modal if has true
     title?: string;
     buttonCloseEnable?: boolean;
     cache?: any[]; // stock elements we want use element in function hide
     hide?: (modalController: ModalController) => void;
     timestampClose?: number // timestamp in millisecond after close modal
     timestampCloseTmp?: number // timestamp in millisecond after close modal 
                             // and remove timestamp after close
  }

ModalModule

template modify

body: container body of modal

header: container header of modal

footer: container footer of modal

in app.module.ts

 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     ModalModule // to import module
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

example use modal

html

 <ng-template #modalBody>
     <p>body text modal</p>
 </ng-template>
 <lib-modal [body]="modalBody" [controller]="modalController"></lib-modal>

on controller

get modalController() {
 return this.controller;
}

controller: ModalController = {
 hide(p1: ModalController) {
   p1.enable = false;
 },
 title: 'hello',
 buttonCloseEnable: false
};