Как отобразить компонент, созданный в поле класса другого компонента?

Чтобы отобразить компонент, созданный в поле класса другого компонента в Angular, можно воспользоваться директивой ngTemplateOutlet. Это позволит динамически создавать и отображать компоненты внутри шаблона другого компонента.

Для начала необходимо создать компонент, который мы хотим отобразить. Например, создадим компонент DynamicComponent:

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

@Component({
  selector: 'app-dynamic',
  template: '<p>This is a dynamic component!</p>',
})
export class DynamicComponent {}

Теперь создадим компонент, в котором мы будем отображать DynamicComponent. Для этого добавим в шаблон этого компонента ng-template с директивой ngTemplateOutlet:

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { DynamicComponent } from 'path/to/dynamic.component';

@Component({
  selector: 'app-container',
  template: `
    <ng-template #dynamicComponent></ng-template>
  `,
})
export class ContainerComponent {
  @ViewChild('dynamicComponent', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  ngAfterViewInit() {
    const dynamicComponentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    this.container.createComponent(dynamicComponentFactory);
  }
}

В данном примере мы создаем DynamicComponent динамически при инициализации компонента ContainerComponent и добавляем его в ViewContainerRef, который указывает на ng-template. Как результат, при отображении ContainerComponent в шаблон будет добавлен и отображен DynamicComponent.

Таким образом, мы можем использовать ngTemplateOutlet для отображения компонентов, созданных динамически в другом компоненте в Angular.