Revision history [back]

Angular version 15 does not exist as the latest stable version is 13 at the time of writing. However, the dynamic component loader (DCL) in Angular works by allowing components to be loaded dynamically at runtime. This means that you can load components on-demand and insert them into your application's DOM as needed.

The DCL works by defining a component as an entry component using the @NgModule decorator. This tells Angular to create a factory for the component, which can be used to dynamically create instances of the component. To load the component at runtime, you can use the ComponentFactoryResolver to get the factory and create a new component instance.

For example, the following code demonstrates how to dynamically load a component:

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

@Component({
  selector: 'app-root',
  template: `
    <div #container></div>
    <button (click)="loadComponent()">Load Component</button>
  `
})
export class AppComponent {

  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  loadComponent() {
    const factory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    const componentRef = this.container.createComponent(factory);
  }
}

In this example, we define a container where we want to load the component dynamically. We then use the ComponentFactoryResolver to get the factory for the DynamicComponent and create a new instance of the component using the createComponent method of the container. This method returns a ComponentRef, which can be used to interact with the component and its properties and methods.

Overall, the dynamic component loader in Angular is a powerful feature that allows you to create flexible and dynamic applications that can adapt to changing requirements and user interactions.