Вкладка p-tabPanel, связанная с отображением ngx-smart-modal при динамическом добавлении вкладок

Question

В настоящее время я пытаюсь добавить динамические вкладки с дочерним компонентом. В дочернем компоненте есть несколько ngx-smart-modal моделей.Я могу создавать динамические вкладки с кнопкой закрытия на нем.Проблема возникает, когда имеется более одной вкладки.

Проблема

Экземпляр 1: я на первой динамически создаваемой вкладке и пытаюсь нажать на модельприсутствует в пользовательском компоненте, модель появляется на последней вкладке динамически созданной вкладки.(С подробностями о последнем компоненте и без сведений о желаемом компоненте)

Экземпляр 2: если он имеет только одну динамически созданную модель, то он работает отлично.

Код

HTML

<p-tabPanel [header]="doc.docName" leftIcon="ui-icon-web-asset" *ngFor="let doc of docProps; let i = index" [selected]="true" (onClose)="closeDocProps(doc)" [closable]="true">
   <app-child-component [docId]="doc.docId" ></app-child-component>
 </p-tabPanel>

app-child-component содержит несколько моделей.

app-child-component (HTML)

<ngx-smart-modal #myModal identifier="myModal">
<h1>Title</h1>
  <p>Some stuff...</p>
  <button (click)="myModal.close()">Close</button>
</ngx-smart-modal>

TS (родительский компонент)

при операции щелчка документа в родительском компоненте

this.docProps.push({
  docId: document.id,
  docName : document.docTitle
});
this.changeDetectorRef.detectChanges();
this.activeIndexNumber = this.docProps.length; // to open up the last tab clicked.

также яизменение номера индекса вкладки с изменением вкладки.

onTabChange(event) {
      this.changeDetectorRef.detectChanges();
      this.activeIndexNumber = event.index;
  }

Есть ли что-то, что я делаю неправильно?Предложения приветствуются.

stackblitz:

https://stackblitz.com/edit/angular-uy3kf5