ngp-modal v0.0.67

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

• validator

name: ngp-modal-validator

• reducer

name: ngp-modal-reducer