Dynamic component loading in Angular - Mini Project: Build & Apply

Dynamic Component Loading in Angular

📖 Scenario: You are building a dashboard in Angular where different widgets can appear based on user choice. You want to load these widgets dynamically without hardcoding them in the template.

🎯 Goal: Create an Angular standalone component that dynamically loads one of two simple widget components based on a configuration variable.

📋 What You'll Learn

Create two simple standalone widget components named WidgetOneComponent and WidgetTwoComponent.

Create a main standalone component named DashboardComponent that will load one of the widgets dynamically.

Use Angular's ViewContainerRef and ComponentFactoryResolver or the modern createComponent method to load the widget.

Add a configuration variable selectedWidget in DashboardComponent to choose which widget to load.

Ensure the dynamic component is loaded inside a container element with a template reference variable.

💡 Why This Matters

🌍 Real World

Dynamic component loading is useful in dashboards, form builders, and plugin systems where UI parts change based on user actions or configuration.

💼 Career

Understanding dynamic component loading helps you build flexible Angular apps and is a common requirement in enterprise Angular development.

1

Create two standalone widget components

Create two standalone Angular components named WidgetOneComponent and WidgetTwoComponent. Each should have a simple template: <p>This is Widget One</p> and <p>This is Widget Two</p> respectively.

Angular

# Your code here to create WidgetOneComponent and WidgetTwoComponent

Need a hint?

Use @Component decorator with standalone: true and simple templates for each widget.

2

Add configuration variable in DashboardComponent

Create a standalone Angular component named DashboardComponent. Inside it, add a public variable called selectedWidget and set it to the string 'one'.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  template: `
  `
})
export class DashboardComponent {
  // Your code here to add selectedWidget variable
}

Need a hint?

Define selectedWidget as a public property initialized to 'one'.

3

Add ViewChild and load dynamic component

In DashboardComponent, import ViewChild, ViewContainerRef, and AfterViewInit. Add a @ViewChild property named widgetContainer of type ViewContainerRef. Implement AfterViewInit and inside ngAfterViewInit(), write code to dynamically create WidgetOneComponent if selectedWidget is 'one', else create WidgetTwoComponent inside widgetContainer.

Angular

import { Component, ViewChild, ViewContainerRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  template: `
    
  `
})
export class DashboardComponent implements AfterViewInit {
  selectedWidget = 'one';

  @ViewChild('widgetContainer', { read: ViewContainerRef, static: true })
  widgetContainer!: ViewContainerRef;

  ngAfterViewInit() {
    // Your code here to load WidgetOneComponent or WidgetTwoComponent dynamically
  }
}

Need a hint?

Use @ViewChild to get the container, clear it, then use createComponent to load the chosen widget.

4

Add imports for dynamic components in DashboardComponent

In DashboardComponent, add import statements for WidgetOneComponent and WidgetTwoComponent so they can be used in createComponent. Also, add these components to the imports array in the @Component decorator of DashboardComponent.

Angular

import { Component, ViewChild, ViewContainerRef, AfterViewInit } from '@angular/core';
import { WidgetOneComponent } from './widget-one.component';
import { WidgetTwoComponent } from './widget-two.component';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [WidgetOneComponent, WidgetTwoComponent],
  template: `
    
  `
})
export class DashboardComponent implements AfterViewInit {
  selectedWidget = 'one';

  @ViewChild('widgetContainer', { read: ViewContainerRef, static: true })
  widgetContainer!: ViewContainerRef;

  ngAfterViewInit() {
    this.widgetContainer.clear();
    if (this.selectedWidget === 'one') {
      this.widgetContainer.createComponent(WidgetOneComponent);
    } else {
      this.widgetContainer.createComponent(WidgetTwoComponent);
    }
  }
}

Need a hint?

Import the widget components and add them to the imports array in @Component.