Angular - как создать отдельный & ldquo; ViewContainerRef & rdquo; Контейнеры для разных вкладок в mat-tab

Я бы предпочел использовать для создания этих контейнеров директиву.

HTML:

<mat-tab-group [selectedIndex]="tabIndex" (selectedTabChange)="getNewTabFields($event)">
    <div *ngIf="errorOccured" class="text-align-center"> No Data Found! </div>
    <ng-container myDirective *ngFor="let tab of tabs" [tab]="tab"></ng-container>
</mat-tab-group>

Моя директива:

@Directive({
  selector: '[myDirective]'
})
export class MyDirective implements OnInit {

  @Input()
  tab: MyTamComponent;


  constructor(private resolver: ComponentFactoryResolver, private container: ViewContainerRef) {}

  ngOnInit(): void {
    const factory = this.resolver.resolveComponentFactory<MyTamComponent>(MyTamComponent);
    const component = this.container.createComponent(factory);

    // other stuff
    component.instance.label = tab.displayName;
    component.instance.ref = component;
  }

}