Как динамически создавать табы с компонентами Angular с помощью jqxtabs?

Question

[ovkr]

Здравствуйте. Кто-нибудь работал с jqwidgets и Angular? Я хочу динамически создавать табы (jqxtabs) с произвольными angular-компонентами в качестве содержимого. Для создания новых вкладок у Jqxtabs есть методы "addAt", "addLast", "AddFirst". Эти методы принимают номер/заголовок таба и строку с html.
Вопрос собственно в том как мне имея возможность вставить в таб только html организовать вставку произвольного angular компонента?

Простейший пример как это выглядит из документации jqwidgetes:

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 {

}