How to Dynamically Create a Component in Angular

Dynamically Loading Angular Components

The Angular framework offers a wide range of built-in features, but there are times when our project requires additional functionality that is not readily available. Thankfully, Angular provides the tools to dynamically load components, allowing us to achieve the desired functionality quickly and efficiently. In this blog post, we will explore how to dynamically load an Angular component and discuss the scenarios where this technique is useful.

When to Use Dynamic Component Loading

Dynamic component loading is particularly useful when we need to create dynamic elements such as pop-ups or modals. By loading components dynamically, we can enhance user interaction and create a more dynamic and engaging user interface.

Getting Started

Let’s dive into the process of dynamically loading an Angular component. Here are the steps:

1. Create a new Angular application using the following command:

ng new angular-dynamic-component

2. Clear the contents of the app.component.html file and replace it with the following code snippet:

<button (click)="loadComponent()">Load Component</button>

<div>
	<h3>Parent</h3>
	<ng-template #target></ng-template>
</div>

In this code snippet, we have added a button that triggers the component loading and a placeholder (ng-template) where the component will be loaded.

3. Open the app.component.ts file and import the necessary modules:

import { Component, ViewChild, ComponentFactoryResolver, ViewContainerRef } from "@angular/core";

Also, inject the ComponentFactoryResolver as a dependency in the constructor:

constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

Next, create a class property that holds the reference to the DOM element:

@ViewChild("target", { read: ViewContainerRef, static: false })
target: ViewContainerRef;` 

The ViewChild decorator is used to access the DOM element in the parent component, and ComponentFactoryResolver is a registry that maps components to generated ComponentFactory classes.

4. Create a child component within the same project by running the following command:

ng g c child

5. Open the child.component.html file and add the following code:

<h2>I am a child component</h2>

6. Now, let’s load the component in the parent component when the button is clicked. Add the following code inside the app.component.ts file:

loadComponent() {
  this.target.clear();
  const factory = this.componentFactoryResolver.resolveComponentFactory(ChildComponent);
  const componentRef = this.target.createComponent(factory);
}

In this code snippet, we clear the target container, resolve the component factory for the ChildComponent, and create a component dynamically using the factory.

7. To avoid errors, we need to add the ChildComponent to the entryComponents array in the AppModule. Update the AppModule as follows:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";

import { AppComponent } from "./app.component";
import { ChildComponent } from "./child/child.component";

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, ChildComponent],
  bootstrap: [AppComponent],
  entryComponents: [ChildComponent]
})
export class AppModule {}

With these changes, the application will run successfully, and the ChildComponent will be loaded dynamically when the button is clicked.

You can test the functionality of dynamic component loading in the StackBlitz embed below:

Conclusion

Dynamically loading Angular components provides us with a powerful technique to create dynamic and interactive elements in our applications. By following the steps outlined in this blog post, you can successfully load components on demand, improving the user experience and flexibility of your Angular projects. Experiment with dynamic component loading in your own projects and unleash the full potential of Angular’s capabilities.