catalog-ui/src/app/ng2/services/modal.service.ts

   1 import { Injectable, Type, ViewContainerRef, ApplicationRef, ComponentFactory, ComponentFactoryResolver, ComponentRef } from '@angular/core';
   2 import { ModalModel, ButtonModel } from 'app/models';
   3 import { ModalComponent } from 'app/ng2/components/modal/modal.component';
   4
   5
   6 @Injectable()
   7 export class ModalService {
   8     currentModal: ComponentRef<any>;
   9
  10
  11     constructor(private componentFactoryResolver: ComponentFactoryResolver, private applicationRef: ApplicationRef) { }
  12
  13
  14     /* Shortcut method to open a simple modal with title, message, and close button that simply closes the modal. */
  15     public openAlertModal(title: string, message: string, closeButtonText?:string) {
  16         let closeButton: ButtonModel = new ButtonModel(closeButtonText || 'Close', 'grey', this.closeCurrentModal);
  17         let modalModel: ModalModel = new ModalModel('sm', title, message, [closeButton]);
  18         this.createCustomModal(modalModel).instance.open();
  19     }
  20
  21
  22     /**
  23      * Shortcut method to open a basic modal with title, message, and an action button with callback, as well as close button.
  24      * NOTE: To close the modal from within the callback, use modalService.closeCurrentModal() //if you run into zone issues with callbacks see:https://stackoverflow.com/questions/36566698/how-to-dynamically-create-bootstrap-modals-as-angular2-components
  25      * @param title Heading for modal
  26      * @param message Message for modal
  27      * @param actionButtonText Blue call to action button
  28      * @param actionButtonCallback function to invoke when button is clicked
  29      * @param cancelButtonText text for close/cancel button
  30      */
  31     public openActionModal = (title:string, message:string, actionButtonText:string, actionButtonCallback:Function, cancelButtonText:string) => {
  32         let actionButton: ButtonModel = new ButtonModel(actionButtonText, 'blue', actionButtonCallback);
  33         let cancelButton: ButtonModel = new ButtonModel(cancelButtonText, 'grey', this.closeCurrentModal);
  34         let modalModel: ModalModel = new ModalModel('sm', title, message, [actionButton, cancelButton]);
  35         this.createCustomModal(modalModel).instance.open();
  36     }
  37
  38
  39     /* Use this method to create a modal with title, message, and completely custom buttons. Use response.instance.open() to open */
  40     public createCustomModal = (customModalData: ModalModel): ComponentRef<ModalComponent> => {
  41         let customModal: ComponentRef<ModalComponent> = this.createDynamicComponent(ModalComponent);
  42         customModal.instance.input = customModalData;
  43         this.currentModal = customModal;
  44
  45         return customModal;
  46     }
  47
  48
  49     public closeCurrentModal = () => {
  50         if (!this.currentModal) return;
  51         this.currentModal.instance.close();
  52         this.currentModal.destroy();
  53     }
  54
  55
  56     //Creates a component dynamically (aka during runtime). If a view container is not specified, it will append the new component to the app root.
  57     //To subscribe to an event from invoking component: componentRef.instance.clicked.subscribe((m) => console.log(m.name));
  58     private createDynamicComponent<T>(componentType: Type<T>, viewContainerRef?:ViewContainerRef): ComponentRef<any> {
  59
  60         viewContainerRef = viewContainerRef || this.getRootViewContainerRef();
  61         viewContainerRef.clear();
  62
  63         let factory: ComponentFactory<any> = this.componentFactoryResolver.resolveComponentFactory(componentType); //Ref: https://angular.io/guide/dynamic-component-loader
  64         let componentRef = viewContainerRef.createComponent(factory);
  65
  66         return componentRef;
  67     }
  68
  69
  70     private getRootViewContainerRef(): ViewContainerRef {
  71         return this.applicationRef.components[0].instance.viewContainerRef;
  72     }
  73 }