Angular 5 - Multiple Mat Tabs uses the same instance of the child component

1
votes

following is my HTML 

<mat-tab-group class="tab-content" [selectedIndex]="activeTabIndex" (selectedIndexChange)="changeActiveTab($event)">
<div *ngFor="let tabId of tabCollection; let i = index;">
    <mat-tab class="tab-content">
        <ng-template mat-tab-label>
            Query {{ tabId }}
            <button mat-icon-button *ngIf="possibleToDestroyTab()" (click)="closeTab(i)">
                <mat-icon>close</mat-icon>
            </button>
        </ng-template>
        <div class="tab-content">
            <app-build-component [myid]="tabId"></app-build-component>
            <app-view-component id={{tabId}}_view></app-view-component>
        </div>
      </mat-tab>
</div>
<mat-tab *ngIf="possibleToCreateTab()" disabled>
    <ng-template mat-tab-label>
        <button mat-icon-button (click)="addTab()">
            <mat-icon>add_circle</mat-icon>
        </button>
    </ng-template>
</mat-tab>

for every tab, I create app-build-component and app-view-component dynamically. But while loading the data, every tab loads the same data and does not differentiate between tabs. Any help is appreciated. When I remove the Tabs part the components individually works fine. Is there a way to create new instances of app-build-component and app-view-component, every time the ngFor is executed and bind it to the current Mat-tab instance under execution?

1
angulartabsangular-material

1 Answers

0
votes

You seem to be missing some quotes from your template:

app-view-component id={{tabId}}_view>

should read

<app-view-component id="{{tabId}}_view">