Общий модальный сервис с использованием ngx BsModalService

Question

Я пытаюсь создать общий модальный компонент для приложения, используя BsModalService. Этот компонент будет иметь разные методы, которые содержат разные заголовок и конфигурацию. и это может быть использовано из любых других компонентов.

Модальный компонент ts file.

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}`);
  }
}

HTML.

<div class="modal-header">
  <h4 class="modal-title pull-left">{{title}}</h4>
  <button type="button" class="close pull-right" aria-label="Close" (click)="close()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  {{message}}
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" (click)="close()">Yes</button>
  <button type="button" class="btn btn-default" (click)="close()">No</button>
</div>

Использование в каком-то другом компоненте. other.component.ts

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();
 }
}

При нажатии на removeDetails в другом компоненте я могу получить модальное подтверждение, но при закрытии выдает ошибку this.modalRef не определено; Может кто-нибудь помочь мне, как это исправить и если мой подход правильный, чтобы изолировать мой modalComponent и другой компонент.**