Angular - Динамический компонент в mat-tab

Question

У меня есть mat-tab-group (угловой материал), и я хочу иметь возможность добавлять из кода позади mat-tabs, включая другие компоненты.Я использую ComponentFactoryResolver для создания компонента, но я не могу добавить новый компонент в новую вкладку mat с помощью ViewContainerRef

html

<mat-tab-group>
 <mat-tab *ngFor="let tab of tabs"  [label]="tab.title">
  <div #test></div>
 </mat-tab>
</mat-tab-group>

кода за

private open(type:string):void{
 var tab = {title:'test'};
 this.tabs.push(tab);

 const factory = this.componentFactoryResolver.resolveComponentFactory(DiscountGridComponent );
 //this will add it in the end of the view
 const newComponentRef = this.viewContainerRef.createComponent(factory);
}