Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як динамічно створити компонент в Angular?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

В Angular компонент можна створити **динамічно** за допомогою `ViewContainerRef` та `ComponentFactoryResolver` (в Angular 13+ краще використовувати просто `ViewContainerRef.createComponent`).

## Приклад для Angular 13+

```typescript
import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `<ng-template #container></ng-template>`
})
export class ParentComponent {
  @ViewChild('container', { read: ViewContainerRef, static: true })
  container!: ViewContainerRef;

createChild() {
    // створюємо компонент динамічно
    const componentRef = this.container.createComponent(ChildComponent);
    componentRef.instance.title = 'Привіт, динамічний компонент!';
  }
}
```

## Пояснення

1. `<ng-template>` слугує точкою вставки для динамічного компонента.
2. `ViewChild` **+** `ViewContainerRef` надають доступ до цієї точки вставки.
3. `createComponent` створює екземпляр компонента і вставляє його в DOM.
4. Через `componentRef.instance` можна задавати властивості компонента після створення.

> Висновок: динамічне створення компонентів дозволяє рендерити елементи за подією чи умовою, без їх попереднього оголошення в шаблоні.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати133 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.