ngp-modal

required

• install

  npm i ngp-modal ngp-core bootstrap

• bootstrap

insert in angular.json

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

insert in your app.module.ts

    imports: [
  BrowserModule,
  AppRoutingModule,
  NgpModalModule,
  NgpCoreModule
]

Modal template builder

• ngp-event: button close modal when clicked (shape cross if in ngp-header)
• ngp-header: part of header
• ngp-footer: part of footer
• ngp-title: part of modal-title
• ng-template in header/footer

Modal opener/closer

controller

ViewChild

export class ModalValidatorComponent implements OnInit {
  @ViewChild('modal')
  private modal?: ModalController;
  
  open(){ this.modal?.open() }
  close(){ this.modal?.close() }
}

<ngp-modal #modal></ngp-modal>

listener

import {BehaviorSubject} from 'rxjs';
import {ModalEventType} from './modal-event-type';

export class ModalValidatorComponent implements OnInit {
  listen = new BehaviorSubject<ModalEventType.OPEN | ModalEventType.CLOSE>(ModalEventType.CLOSE);

  open() {
    this.listen.next(ModalEventType.OPEN);
  }

  close() {
    this.listen.next(ModalEventType.CLOSE);
  }
}

<ngp-modal [listen]="listen"></ngp-modal>

validator

function load

  load(Observable)
  loading(boolean)

Modal

create modal dialog bootstrap

<ngp-modal footer-enable="false" close-enable="false" [listen]="observableOpenClose">
  <ng-container ngp-header>
    <div class="modal-title">
      title modal
    </div>
    <button (ngp-event)="closing($event)"></button> <!-- cross close -->
  </ng-container>
  any element insert in body
</ngp-modal>

<ngp-modal footer-enable="false" [listen]="observableOpenClose">
  <div ngp-title>title modal</div>
  any element insert in body
</ngp-modal>

Modal validator

expose your request with 3 possibility accept/refuse/ignored

<ngp-modal-validator accept="Accept" refuse="Refused" (accepted)="receiveAccept($event)" (canceled)="receiveCancel($event)"
                     [listen]="observableOpenClose" ignored-enable="false">
  validator body
</ngp-modal-validator>

Modal Reducer

modal reducer, when reduce remove backdrop

<ngp-modal-reducer [listen]="observableOpenClose" [header-reduce]="headerReduce">
</ngp-modal-reducer>

<ng-template #headerReduce>
  modal header reduce
</ng-template>

Modal loader

open loader bootstrap round or circle

<ngp-loader></ngp-loader>

Event

type

• OPEN => modal open
• CLOSE => modal close
• IGNORED => cross close for validator
• ACCEPTED => valid validator
• CANCELED => cancel validator
• MAXIMIZED => click on maximize button for Reducer
• MINIMIZED => click on minimize button for Reducer
• LOADING => start load
• FINISH => stop load

content

export interface ModalEvent<T extends ModalEventType> {
  type: T;
  name?: string; // id modal
}

listener event

  this.modalService.receiveEvent(): Observable<ModalEvent<ModalEventType>>
this.modalService.receiveValidator(): Observable<ModalEvent<ModalEventType.REFUSED | ModalEventType.ACCEPTED | ModalEventType.IGNORED>>
this.modalService.receiveLoad(): Observable<ModalEvent<ModalEventType.LOADING | ModalEventType.FINISH>>
this.modalService.receiveControl(): Observable<ModalEvent<ModalEventType.OPEN |ModalEventType.CLOSE>>
this.modalService.receiveReducer(): Observable<ModalEvent<ModalEventType.MAXIMIZED | ModalEventType.MINIMIZED>>

parameter

all parameters exist with format string: example > boolean = boolean | 'true' | 'false'

• modal

name: ngp-modal

| name | type | description | default | |----------------------|------------------------|-------------------------------------------|---------| | title | string | title in header | | | style | string | put custom style on modal | '' | | id | string | id to modal | | | listen | Observable<OPEN/CLOSE> | could open and close modal | | | header | TemplateRef | template for header | | | event | signal | all interaction with modal | | | footer | TemplateRef | replace button close in footer | | | class | string | class add modal => .modal.add | '' | | body-enable | boolean | show body | true | | backdrop-enable | boolean | show backdrop | true | | event-service-enable | boolean | send event in modalService | true | | timeout | Timeout | time with unit to keep open modal | | | time | number | time to keep open modal default ms | | | unit | TimeoutUnit | unit to convert time | ms | | active | boolean | default open | false | | close-footer-enable | boolean | show button close in footer | true | | header-enable | boolean | show header | true | | close-enable | boolean | show cross in header | true | | decorator-enable | boolean | show only backdrop with transparent modal | false | | footer-enable | boolean | show footer | true | | center | boolean | center modal | true | | scrollable | boolean | content is scrollable | false |

• validator

name: ngp-modal-validator

| name | type | description | default | |----------------|------------------------|--------------------------------|---------| | accepted | signal | click on button accept | | | canceled | signal | click on button cancel | | | ignored | signal | click on button ignored | | | accept | string | label button accepted | ok | | cancel | string | label button canceled | cancel | | ignored-enable | boolean | enable cross button to ignored | true | | title | string | title in header | | | id | string | id to modal | | | listen | Observable<OPEN/CLOSE> | could open and close modal | | | header | TemplateRef | template for header | | | class | string | class add modal => .modal.add | '' | | body-enable | boolean | show body | true | | event | send ModalEvent object | all interaction with modal | | | header-enable | boolean | show header | true | | active | boolean | default open | false | | center | boolean | center modal | true | | scrollable | boolean | content is scrollable | false |

• reducer

name: ngp-modal-reducer

| name | type | description | default | |---------------------|------------------------|--------------------------------|---------| | title-reduce | string | title show when reduce | | | header-reduce | TemplateRef | template show when reduce | | | reducing | Event | throw when reduce modal | | | expanding | Event | throw when expand modal | | | title | string | title in header | | | id | string | id to modal | | | listen | Observable<OPEN/CLOSE> | could open and close modal | | | header | TemplateRef | template for header | | | class | string | class add modal => .modal.add | '' | | event | signal | all interaction with modal | | | footer | TemplateRef | replace button close in footer | | | active | boolean | default open | false | | footer-enable | boolean | show footer | true | | center | boolean | center modal | true | | scrollable | boolean | content is scrollable | false | | close-footer-enable | boolean | show button close in footer | true | | close-enable | boolean | show cross in header | true |