Як динамічно створити компонент в Angular?
В 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 = 'Привіт, динамічний компонент!';
}
}Пояснення
<ng-template>слугує точкою вставки для динамічного компонента.ViewChild+ViewContainerRefнадають доступ до цієї точки вставки.createComponentстворює екземпляр компонента і вставляє його в DOM.- Через
componentRef.instanceможна задавати властивості компонента після створення.
Висновок: динамічне створення компонентів дозволяє рендерити елементи за подією чи умовою, без їх попереднього оголошення в шаблоні.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.