Angular 5 - несколько вкладок матов используют один и тот же экземпляр дочернего компонента

ниже мой 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>

для каждой вкладки я создаю компонент app-build-component и app-view-component динамически. Но при загрузке данных каждая вкладка загружает одни и те же данные и не делает различий между вкладками. Любая помощь приветствуется. Когда я удаляю часть вкладок, компоненты по отдельности работают нормально. Есть ли способ создавать новые экземпляры app-build-component и app-view-component каждый раз, когда выполняется ngFor, и связывать его с текущим экземпляром Mat-tab при выполнении?