Valor-software / ngx-bootstrap помещает компонент в динамически создаваемый контент

Я пытаюсь использовать valor-software / ngx-bootstrap, чтобы создать динамическую вкладку, но я хочу поместить селектор компонента внутри динамически создаваемого содержимого вкладки,

В примере документации мы имеем:

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'demo-tabs-dynamic',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './dynamic.html'
})
export class DemoTabsDynamicComponent {
  tabs: any[] = [
    { title: 'Dynamic Title 1', content: 'Dynamic content 1' },
    { title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: 
true },
    { title: 'Dynamic Title 3', content: 'Dynamic content 3', 
removable: true }
  ];

  addNewTab(): void {
    const newTabIndex = this.tabs.length + 1;
    this.tabs.push({
      title: `Dynamic Title ${newTabIndex}`,
      content: `Dynamic content ${newTabIndex}`,
      disabled: false,
      removable: true
    });
  }

}

И я хочу сделать что-то вроде этого:

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'demo-tabs-dynamic',
  changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './dynamic.html'
})
export class DemoTabsDynamicComponent {
  tabs: any[] = [
    { title: 'Dynamic Title 1', content: 'Dynamic content 1' },
    { title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: 
true },
    { title: 'Dynamic Title 3', content: 'Dynamic content 3', 
removable: true }
  ];

  addNewTab(): void {
    const newTabIndex = this.tabs.length + 1;
    this.tabs.push({
      title: `Dynamic Title ${newTabIndex}`,
      content: `<my-component></my-component>`, // Here is the change
      disabled: false,
      removable: true
    });
  }
}

Angular преобразует селектор компонентов в строку. Есть ли обходной путь?