title: common modal service using ngx BsModalService
body: <p>I'm trying to create a common modal component for the application using BsModalService.
  This component will have different methods which contains different title and config. and that can be used from any other components.</p>
  
  <p><strong>Modal component ts file.</strong></p>
  
  <pre><code>import { Component, OnInit, AfterViewInit, } from '@angular/core';
  import { BsModalRef,BsModalService } from 'ngx-bootstrap';
  
  @Component({
    selector: 'app-modal',
    templateUrl: './app-modal.component.html',
    styleUrls: ['./app-modal.component.scss'],
  })
  export class AppModalComponent implements OnInit, AfterViewInit {
    public modalRef: BsModalRef;
    constructor(private modalService: BsModalService) {
      console.log(`ngAfterViewInit - modaldiretive is---`);
    }
    ngOnInit() {
  
    }
    confirmationModal(){
      const initialState = {
              title: 'Confirmation',
              message:'Are you sure, you want to delete this campaign?'
      };
      this.modalRef = this.modalService.show(AppModalComponent, {
        class: 'modal-dialog-centered', ignoreBackdropClick :true,initialState 
      });
    }
    **close(){
      this.modalRef.hide();
    }**
  
    ngAfterViewInit() {
      console.log(`ngAfterViewInit - modaldiretive is ${this}`);
    }
  }
  </code></pre>
  
  <p><strong>html.</strong></p>
  
  <pre><code>&lt;div class="modal-header"&gt;
    &lt;h4 class="modal-title pull-left"&gt;{{title}}&lt;/h4&gt;
    &lt;button type="button" class="close pull-right" aria-label="Close" (click)="close()"&gt;
      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
    {{message}}
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
    &lt;button type="button" class="btn btn-default" (click)="close()"&gt;Yes&lt;/button&gt;
    &lt;button type="button" class="btn btn-default" (click)="close()"&gt;No&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Using in some other component.
  other.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { BsModalRef, BsModalService } from 'ngx-bootstrap';
  import { AppModalComponent } from 'app/core/modal/app-modal.component';
  @Component({
    selector: 'details',
    templateUrl: './details.component.html',
    styleUrls: ['./details.component.scss']
  })
  export class DetailsComponent{
  constructor() {
  
  }
   removeDetails() {
        this.appModal.confirmationModal();
   }
  }
  </code></pre>
  
  <p>On click of removeDetails in  other component i'm able to get the confirmation modal but when closing it throws error this.modalRef is undefined;
  Can some one help me how to fix this and if my approach is correct to isolate my modalComponent and other component.**</p>