«Встроенный компонент Angular» относится к методу Angular, при котором вы определяете и используете компонент непосредственно в шаблоне другого компонента, не создавая отдельный файл компонента. Этот подход также известен как встроенные или анонимные компоненты.

В Angular есть несколько методов создания встроенных компонентов:

1. Встроенный компонент шаблона. Вы можете определить встроенный компонент непосредственно внутри шаблона, используя директиву ng-templateи директиву ngComponentOutlet. Это позволяет создавать компонент «на лету» без отдельного файла класса компонента.

Пример:

<ng-template #inlineComponent>
  <h1>Inline Component</h1>
  <!-- Inline component template content -->
</ng-template>
<ng-container *ngComponentOutlet="inlineComponent"></ng-container>

2. Динамическое создание компонентов: Angular предоставляет способ динамического создания компонентов с помощью ComponentFactoryResolver. Вы можете использовать этот метод для динамического создания экземпляров и визуализации компонентов внутри другого компонента.

Пример:

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';
@Component({
  selector: 'app-parent-component',
  template: `
    <div #container></div>
  `
})
export class ParentComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
  constructor(private resolver: ComponentFactoryResolver) {}
  createInlineComponent() {
    const factory = this.resolver.resolveComponentFactory(InlineComponent);
    const componentRef = this.container.createComponent(factory);
    // Access and modify the instance of the inline component if needed
  }
}

Библиотека
3. ng-dynamic-comComponent: Если вы предпочитаете более оптимизированный подход, вы можете использовать сторонние библиотеки, такие как ng-dynamic-comComponent, которые упрощают процесс динамического создания и рендеринга встроенных компонентов..