Angular 2 - Open/Close default bootstrap modal

Question

I do not want to use angular2-bootstrap or ng2-bs3-modal as suggested in the questions/answers Angular 2 Bootstrap Modal and Angular 2.0 and Modal Dialog

Now. I kno

Answer 1

You can try something like this, create myModal.html:

  

     

        

          

            {{title}} 
            
            
{{subTitle}}
          
        
      
  

then, create myModal.component.ts:

import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';

const template: string = require('./myModal.html');

@Component({
   selector: 'modal',
   template
})

export class Modal implements OnInit {
  @Input('show-modal') showModal: boolean;
  @Input('title') title: string;
  @Input('sub-title') subTitle: string;
  @Input('cancel-label') cancelLabel: string;
  @Input('positive-label') positiveLabel: string;

  @Output('closed') closeEmitter: EventEmitter < ModalResult > = new EventEmitter < ModalResult > ();
  @Output('loaded') loadedEmitter: EventEmitter < Modal > = new EventEmitter < Modal > ();
  @Output() positiveLabelAction = new EventEmitter();

  constructor() {}

  ngOnInit() {
    this.loadedEmitter.next(this);
  }

  show() {
    this.showModal = true;
  }

  hide() {
    this.showModal = false;
    this.closeEmitter.next({
      action: ModalAction.POSITIVE
    });
  }

  positiveAction() {
    this.positiveLabelAction.next(this);
    return false;
  }

  cancelAction() {
    this.showModal = false;
    this.closeEmitter.next({
      action: ModalAction.CANCEL
    });
    return false;
  }
}

export enum ModalAction { POSITIVE, CANCEL }

export interface ModalResult {
  action: ModalAction;
}

then create module for this so that you can use anywhere and use it anywhere like this:

  

    
Are you sure you want to delete the user permanently?
  
  

    
        Cancel
    
    
        Delete
    
   
 

You can enhance this also :)