How to dynamically create tabs with Angular components using jqxtabs?

Question

Angular

Hello. Has anyone worked with jqwidgets and Angular? I want to dynamically create tabs (jqxtabs) with arbitrary angular components as content. To create new tabs, Jqxtabs has methods "addAt", "addLast", "AddFirst". These methods accept tab number/title and html string.
The question actually is how can I, having the opportunity to insert only html into a tab, organize the insertion of an arbitrary angular component?
The simplest example of what it looks like from the jqwidgetes documentation:

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
import { jqxTabsComponent } from "../assets/jqwidgets-ts/angular_jqxtabs";
 
@Component({
    selector: "app-root",
    template: `<jqxTabs #tabsReference [auto-create]="false">
                    <ul>
                        <li>Node.js</li>
                        <li>JavaServer Pages</li>
                    </ul>
                    <div>
                        Node.js Content
                    </div>
                    <div>
                        JavaServer Content
                    </div>
               </jqxTabs>
              <button (click)="addTab()">add tab</button>
             `
})
 
export class AppComponent implements AfterViewInit
{
    @ViewChild("tabsReference") myTabs: jqxTabsComponent;
 
    ngAfterViewInit(): void 
    {
        this.myTabs.createComponent(this.tabsSettings);
    }
 
    tabsSettings: jqwidgets.TabsOptions =
    {
        width: "90%",
        height: 200,
        position: "top",
        animationType: "none",
        selectionTracker: false
    };

   addTab() {
      //Как вместо текста внедрить в тело таба произвольный компонент? Например TestComponent
       this.myTabs.AddLast("New tab title", "Some text");
   }
}

@Component( {
    selector: "test",
    template: "Some test..."
}
)
export class TestComponent {

}