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

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
}

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
  }
}

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);
    }
  }
}

Hint

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

Practice

1. What is the main purpose of dynamic component loading in Angular?

easy

A. To add components to the view while the app is running

B. To statically declare all components in the template

C. To improve CSS styling of components

D. To replace Angular modules with components

Solution

1. Step 1: Understand dynamic component loading

   Dynamic component loading means adding components to the app view during runtime, not just at compile time.

2. Step 2: Compare options

   Only To add components to the view while the app is running describes adding components while the app runs. Other options describe static or unrelated concepts.

3. Final Answer:

   To add components to the view while the app is running -> Option A

4. Quick Check:

   Dynamic loading = add components at runtime [OK]

Hint: Dynamic loading means adding components during app run [OK]

Common Mistakes:

• Confusing dynamic loading with static template declaration
• Thinking it changes CSS or modules
• Assuming it replaces Angular modules

2. Which Angular service is used to insert a dynamic component into the view?

easy

A. Renderer2

B. HttpClient

C. ViewContainerRef

D. NgModuleRef

Solution

1. Step 1: Identify the service for dynamic insertion

   ViewContainerRef provides a container where components can be dynamically added or removed.

2. Step 2: Eliminate other options

   Renderer2 is for DOM manipulation, HttpClient for HTTP calls, NgModuleRef for module references, none for dynamic component insertion.

3. Final Answer:

   ViewContainerRef -> Option C

4. Quick Check:

   Dynamic insertion uses ViewContainerRef [OK]

Hint: Use ViewContainerRef to insert dynamic components [OK]

Common Mistakes:

• Choosing Renderer2 which is for DOM, not components
• Confusing HttpClient with component loading
• Using NgModuleRef incorrectly

3. Given this code snippet, what will be the output in the browser?

const componentRef = viewContainerRef.createComponent(MyComponent);
componentRef.instance.title = 'Hello';

Assuming MyComponent displays {{ title }} in its template.

medium

A. The component will load but title will be empty

B. The text 'Hello' will appear where the component is loaded

C. Nothing will appear because the component is not attached

D. An error because title is not a valid property

Solution

1. Step 1: Understand createComponent and instance property

   createComponent adds the component to the view. Setting instance.title assigns the property used in the template.

2. Step 2: Predict rendered output

   Since {{ title }} is displayed, and title is set to 'Hello', the text 'Hello' will appear.

3. Final Answer:

   The text 'Hello' will appear where the component is loaded -> Option B

4. Quick Check:

   Set instance property = visible text [OK]

Hint: Setting instance properties updates displayed content [OK]

Common Mistakes:

• Thinking component is not attached after createComponent
• Assuming property must be declared differently
• Ignoring that instance properties affect template

4. What is wrong with this code snippet for dynamic component loading?

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

load() {
  const comp = this.containerRef.createComponent(SomeComponent);
  comp.instance.data = 'Test';
}

medium

A. ViewChild should not use read option

B. Using createComponent without importing ComponentFactoryResolver

C. Cannot assign data property on instance

D. Missing #container template reference in HTML

Solution

1. Step 1: Check ViewChild usage

   ViewChild with #container expects a matching template reference variable in HTML.

2. Step 2: Identify missing template reference

   If #container is missing in the template, containerRef will be undefined, causing runtime errors.

3. Final Answer:

   Missing #container template reference in HTML -> Option D

4. Quick Check:

   ViewChild needs matching template ref [OK]

Hint: Always add matching #ref in template for ViewChild [OK]

Common Mistakes:

• Assuming ComponentFactoryResolver is needed in Angular 14+
• Thinking instance properties can't be assigned
• Misusing read option in ViewChild

5. You want to load different components dynamically based on user input. Which approach correctly handles this scenario in Angular?

hard

A. Use a single ViewContainerRef and call createComponent() with the chosen component type each time, clearing previous components

B. Declare all possible components in the template and use *ngIf to show/hide them

C. Create components manually with new keyword and append to DOM

D. Use Angular modules to switch components dynamically without ViewContainerRef

Solution

1. Step 1: Understand dynamic component switching

   Using ViewContainerRef with createComponent allows loading different components at runtime by clearing old ones and adding new.

2. Step 2: Evaluate other options

   Declare all possible components in the template and use *ngIf to show/hide them is static and less flexible. Create components manually with new keyword and append to DOM bypasses Angular and breaks framework rules. Use Angular modules to switch components dynamically without ViewContainerRef misunderstands modules' role.

3. Final Answer:

   Use a single ViewContainerRef and call createComponent() with the chosen component type each time, clearing previous components -> Option A

4. Quick Check:

   Dynamic switching = clear + createComponent [OK]

Hint: Clear container then create chosen component dynamically [OK]

Common Mistakes:

• Using static *ngIf instead of dynamic loading
• Trying to create components with new keyword
• Confusing modules with dynamic component loading