Modal

This library help to construct modal dialog

Predicat

• bootstrap

    "dependencies": {
      "bootstrap": "^5.0.1"  
    }
  

  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";
  

• import modal in your application

  in app.module.ts

  
  imports: [
    ModalModule
  ]
  

Model

ModalController

type of component to control open, close and status of modal

interface ModalController {
  open(context?: ModalContext): void;
  openWithListener(context?: ModalContext): ModalListener | undefined
  close(): void;
  isEnable: boolean;
  isReducible: boolean;
}

create modal

insert in html associate at your component

<modal [id]="'myId'" #modal></modal>

insert in your component's controller

@ViewChild('modal') private modal?: ModalController;

to open modal or close

• modal?.open();
• modal?.close();
• modal?.openWithListener();
• ModalUtils.openModal(undefined, 'myId');

particularity

listener

could execute script when before and/or after open/close just this open modal

  modal?.openWithListener().open.after().subscribe(value => myScript());

context

by context interact with elements disable, change content, action when open/close

interface ModalContext {
  id?: string,
  timeout?: ModalTimeout;
  content?: ModalContent;
  open?: ModalAction;
  close?: ModalAction;
  disables?: ModalDisable;
}


interface ModalDisable {
  button?: boolean;
  cross?: boolean;
  header?: boolean,
  body?: boolean,
  footer?: boolean,
  decorator?: boolean,
  blackOverride?: boolean,
  background?: boolean,
  center?: boolean,
  scrollable?: boolean
}

interface ModalContent {
  title?: string;
  buttonCloseName?: string;
}

interface ModalAction {
  before?: () => (boolean | Observable<boolean>); // wait response if could open. default true if not subscribe
  after?: () => void;
}

interface ModalTimeout {
  timeout?: number;
  unit?: ModalTimeoutUnit;
}

-- context could be by default to modal or just only session open

• default context:

  • options in component example

    <modal [id]="" [active]="" 
  (signalClose)="" (signalOpen)="" [afterClose]="" [afterOpen]="" backgroundDisable="true"
  blackOverrideDisable="true" [body]="" [header]="" [footer]="" 
  footerDisable="true" bodyDisable="true" headerDisable="" [content]="" 
  title="" buttonCloseName=""></modal>
  

  • just put context

  defaultContext: ModalContext = {};
  

  <modal [context]="defaultContext" #modal></modal>
  

options on controller

• on open => modal?.open(myContext);
• on open => modal?.openWithListener(myContext);
• on open => ModalUtils.openModal(myContext, 'myId');

parameters

• controller access in html

  @Input()
  header?: TemplateRef<any>;
  @Input()
  body?: TemplateRef<any>;
  @Input()
  footer?: TemplateRef<any>;

  @Output()
  signalOpen = new EventEmitter<() => BehaviorSubject<ModalContext | undefined>>();
  @Output()
  signalClose = new EventEmitter<() => BehaviorSubject<boolean>>();
  @Output()
  beforeOpen = new EventEmitter<() => BehaviorSubject<boolean>>();
  @Output()
  beforeClose = new EventEmitter<() => BehaviorSubject<boolean>>();
  @Output()
  afterOpen = new EventEmitter<void>();
  @Output()
  afterClose = new EventEmitter<void>();
  
  @Input()
  set context(context: ModalContext)
  @Input()
  set timeout(timeout: number | string | ModalTimeout)
  @Input()
  set timeoutUnit(unit: 'second' | 'minute' | 'millisecond' | ModalTimeoutUnit)
  @Input()
  set id(id: string | undefined)
  @Input()
  set content(content)
  @Input()
  set title(title: string)
  @Input()
  set buttonCloseName(buttonCloseName: string)
  @Input()
  set openAction(open: ModalAction)
  @Input()
  set closeAction(close: ModalAction)
  @Input()
  set disables(disables)
  @Input()
  set backgroundDisable(disable: boolean | 'true' | 'false')
  @Input()
  set buttonDisable(disable: boolean | 'true' | 'false')
  @Input()
  set crossDisable(disable: boolean | 'true' | 'false')
  @Input()
  set headerDisable(disable: boolean | 'true' | 'false')
  @Input()
  set bodyDisable(disable: boolean | 'true' | 'false')
  @Input()
  set footerDisable(disable: boolean | 'true' | 'false')
  @Input()
  set decoratorDisable(disable: boolean | 'true' | 'false')
  @Input()
  set blackOverrideDisable(disable: boolean | 'true' | 'false')
  @Input()
  set centerDisable(disable: boolean | 'true' | 'false')
  @Input()
  set scrollableDisable(disable: boolean | 'true' | 'false')
  @Input()
  set active(isActive: boolean | 'true' | 'false')

• by typescript

import {ModalUtils} from './modal-utils';

ModalController
{
  open(context ? : ModalContext)
:
  void;
  openWithListener(context ? : ModalContext)
:
  ModalListener | undefined
}

ModalUtils {
static openModal(context?: ModalContext, id?: string, timeout?: number,
                 unit?: ModalTimeoutUnit): Promise<ModalListener | undefined> 
static closeModal(id?: string): void
}

bonus

modal wait

just change body and could send context when open