Dynamic Component Loading

Dynamic component loading allows you to load components at runtime. This guide covers the basics of dynamically loading components in Angular using ComponentFactoryResolver and ViewContainerRef.

Setting Up Dynamic Component Loading

First, create the components you want to load dynamically:

$ ng generate component dynamic1
$ ng generate component dynamic2

Creating a Directive for Dynamic Loading

Create a directive to mark the location where the dynamic component will be inserted:

// dynamic-host.directive.ts
import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appDynamicHost]'
})
export class DynamicHostDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

Loading Components Dynamically

Use ComponentFactoryResolver and ViewContainerRef to load components dynamically:

// dynamic-loader.component.ts
import { Component, ComponentFactoryResolver, ViewChild } from '@angular/core';
import { DynamicHostDirective } from './dynamic-host.directive';
import { Dynamic1Component } from './dynamic1/dynamic1.component';
import { Dynamic2Component } from './dynamic2/dynamic2.component';

@Component({
  selector: 'app-dynamic-loader',
  template: `
    
    
    
  `
})
export class DynamicLoaderComponent {
  @ViewChild(DynamicHostDirective, { static: true }) dynamicHost: DynamicHostDirective;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  loadComponent(componentNumber: number) {
    const viewContainerRef = this.dynamicHost.viewContainerRef;
    viewContainerRef.clear();

    let componentFactory;
    if (componentNumber === 1) {
      componentFactory = this.componentFactoryResolver.resolveComponentFactory(Dynamic1Component);
    } else {
      componentFactory = this.componentFactoryResolver.resolveComponentFactory(Dynamic2Component);
    }

    viewContainerRef.createComponent(componentFactory);
  }
}

Declaring Components and Directive

Ensure the components and directive are declared in your module:

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { Dynamic1Component } from './dynamic1/dynamic1.component';
import { Dynamic2Component } from './dynamic2/dynamic2.component';
import { DynamicLoaderComponent } from './dynamic-loader/dynamic-loader.component';
import { DynamicHostDirective } from './dynamic-host.directive';

@NgModule({
  declarations: [
    AppComponent,
    Dynamic1Component,
    Dynamic2Component,
    DynamicLoaderComponent,
    DynamicHostDirective
  ],
  imports: [BrowserModule],
  entryComponents: [Dynamic1Component, Dynamic2Component],
  bootstrap: [AppComponent]
})
export class AppModule { }

Using the Dynamic Loader Component

Use the dynamic loader component in your application to dynamically load components:

// app.component.html

Key Points

Dynamic component loading allows you to load components at runtime using ComponentFactoryResolver and ViewContainerRef.
Create a directive to mark the location where the dynamic component will be inserted.
Use ComponentFactoryResolver to create component factories and ViewContainerRef to insert components.
Declare the dynamic components and directive in your module and add them to the entryComponents array.
Use the dynamic loader component to dynamically load components in your application.

Conclusion

Dynamic component loading in Angular allows you to load components at runtime, providing flexibility and enhancing user experience. By using ComponentFactoryResolver and ViewContainerRef, you can efficiently manage dynamic components in your applications. Happy coding!