Angular & Signals (283 Qs)•Part 2: HttpClient, RxJS Observables & Angular Elements (36 - 62)
What are dynamic components?
Dynamic components are the components in which the component's location in the application is not defined at build time i.e. they are not used in any angular template. Instead, the component is instantiated and placed in the application at runtime.
Practical Code Example
typescript
// Dynamic Components: Loading components imperatively at runtime
import { Component, ViewContainerRef, inject } from '@angular/core';
import { ModalAlertComponent } from './modal-alert.component';
@Component({ selector: 'app-host', standalone: true, template: `<button (click)="open()">Open</button>` })
export class HostComponent {
private vcr = inject(ViewContainerRef);
open() {
const compRef = this.vcr.createComponent(ModalAlertComponent);
compRef.instance.message = 'Dynamic Dialog Loaded!';
}
}