ngx-bootstrap несколько перетаскиваемых модалов (не вложенных) на одной странице

Question

Я новичок в ngx-bootstrap.. работаю с модальностями ngx-bootstrap..

использование дочернего модального компонента (@ViewChild('childModal') childModal: CommonModalComponent)

я умею создавать простые модалы.

Требуется показать несколько перетаскиваемых модалов на одной странице.

Например. две кнопки на странице. button1 & button2. если я нажму на кнопку 1, то должен отобразиться соответствующий модал-1. и теперь модал-1 должен оставаться открытым, и я могу нажать на кнопку2, и он покажет модал2. теперь я могу видеть и modal1, и modal2 на одной странице и могу перетаскивать оба..?

как это сделать с помощью ngx-bootstrap?

модальный-dailog.component.ts

import {Component,Input, ViewChild} from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap';

@Component({
  selector: 'common-modal',
  templateUrl: './modal-dailog.component.html',

})
export class CommonModalComponent {
   @ViewChild('childModal') public childModal:ModalDirective;
   @Input() title?:string;
  constructor() {
  }
  show(){
    this.childModal.show();
  }
  hide(){
    this.childModal.hide();
  }
}

модальной dailog.component.html

<div id='wrapper'>

    <div bsModal #childModal="bs-modal" class="modal fade"  role="dialog" aria-labelledby="mySmallModalLabel" [config]="{backdrop: false, ignoreBackdropClick: true}"  aria-hidden="false">
         <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title pull-left">{{title}}</h4>
                    <button type="button" class="close pull-right" aria-label="Close" (click)="hide()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <ng-content select=".modal-body"> </ng-content>
                    <ng-content select=".modal-footer"> </ng-content>
                </div>

            </div>
        </div>
    </div>
</div>

parent.component.ts

import {Component, ViewChild, ViewContainerRef} from '@angular/core'
import {CommonModalComponent} from './core/modal-dailog/modal-dailog.component';
@Component({
    selector: 'modal-demo',
    templateUrl: './parent.component.html',
})
export class demoComponent {

    @ViewChild('childModal') childModal: CommonModalComponent;
    @ViewChild('childModal2') childModal2: CommonModalComponent;
    constructor() {
    } 
    onCancle() {        
        this.childModal.hide();
    }

    onCancle2() {

        this.childModal2.hide();
    }

}

parent.component.html

        <button type="button" class="btn btn-primary" 
           (click)="childModal.show()">Open modal</button>

        <common-modal  #childModal [title]="'common modal'"> 
            <div class="modal-body">
               hii, modal-body 1
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" 
                  (click)="onCancle()" >Cancle
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>  
        </common-modal> 


        <button type="button" class="btn btn-primary" 
           (click)="childModal2.show()">Open modal2</button>
        <common-modal  #childModal2 [title]="'common modal2'"> 
            <div class="modal-body">
               hii, modal-body 2
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" 
                  (click)="onCancle2()" >Cancle
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>  
        </common-modal>