Dynamic Component Loading in Angular

1. Introduction

Dynamic component loading in Angular allows developers to load components at runtime. This is particularly useful for scenarios where components are not known at compile time, such as in plugin architectures, modals, or dynamic dashboards.

2. Key Concepts

2.1 Component Factory

A Component Factory is a class that creates a component instance. Angular provides the ComponentFactoryResolver service to resolve component factories dynamically.

2.2 ViewContainerRef

ViewContainerRef is a reference to a container in which one or more views can be attached. It's essential for dynamically inserting components into the DOM.

3. Setup

To set up dynamic component loading, you need to create a base component and a component to load dynamically.

Generate the base component.

Generate the dynamic component.

Inject the ComponentFactoryResolver and ViewContainerRef.

Use the createComponent method to load the dynamic component.

4. Implementation

Here’s how to implement dynamic component loading step-by-step:

4.1 Create the Base Component

ng generate component base

4.2 Create the Dynamic Component

ng generate component dynamic

4.3 Implement Dynamic Loading in Base Component

Modify the base component to load the dynamic component:


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

@Component({
  selector: 'app-base',
  template: ``
})
export class BaseComponent {
  @ViewChild('dynamicContainer', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  loadDynamicComponent() {
    const factory = this.resolver.resolveComponentFactory(DynamicComponent);
    this.container.createComponent(factory);
  }
}

Note: Make sure to declare the dynamic component in the module where it is used, or add it to the entry components in Angular versions prior to 9.

5. FAQ

What is the purpose of dynamic component loading?

Dynamic component loading allows developers to load components on demand, which enhances flexibility and reduces initial loading time by only loading components that are needed.

Can I pass data to dynamically loaded components?

Yes, you can pass data using component inputs or by setting properties on the component instance after it has been created.

What are the performance implications of dynamic loading?

While dynamic loading can improve performance by reducing initial load time, it may introduce overhead during runtime when components are created. It’s essential to balance dynamic loading with performance requirements.