Currently, I'm trying to add dynamic tabs which have child component, Within the child component, there are several ngx-smart-modal models. I'm able to create dynamic tabs with a close button on it. The issue arises when there are more than one tabs.
Issue
Instance 1: I'm on the first dynamically created tab and I try to click on the model present in a custom component, Model pops up in the last tab of the dynamically created tab. (With the last component details and not desired component details)
Instance 2: If it has only a single dynamically created a model then it works perfectly fine.
Code
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 has several models present in it.
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 (Parent component)
on document click operation in the parent component
this.docProps.push({
docId: document.id,
docName : document.docTitle
});
this.changeDetectorRef.detectChanges();
this.activeIndexNumber = this.docProps.length; // to open up the last tab clicked.
also, I'm changing the tab index number with the change of the tab.
onTabChange(event) {
this.changeDetectorRef.detectChanges();
this.activeIndexNumber = event.index;
}
Is there something that I'm doing wrong? Suggestions are highly welcomed.
stackblitz:
