How To Create Dynamic Components In Angular Application

Introduction

 

In this article, we will learn how to create Dynamic Components in Angular Application.

 

Step 1

 

Create an Angular project setup using the below commands or however you create your Angular app

 

ng new projectname

 

Example,

 

ng new dynamic

 

 

 

Step 2

 

Next, Now, we must generate Component from our Angular cli,

 

Open a new terminal and run the following below commands

 

ng g c dynamic

 

 

 

Step 3 - App.module.ts

 

Now we will providers service in app.moudule.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DynamicComponent } from './dynamic/dynamic.component';

@NgModule({
  declarations: [
    AppComponent,
    DynamicComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4 - ViewChild

 

It is a decorators in Angular provide a way to access and manipulate DOM elements, directives and components.

 

The following meta information in decorator:

• selector - the selector of the element to query. This can be a directive type or a name.
• read - read a different token from the queried elements.

ViewContainerRef

 

It is represents a container where one or more views can be attached to a component and DOM element can be used as a view container.

 

we are inserting new components or templates programmatically, we probably used the ViewContainerRef service.

 

What is ComponentFactoryResolver

 

A simple registry that maps Components to generated Component Factory classes that can be used to create instances of components. Use to obtain the factory for a given component type, then use the factory's create () method to create a component of that type.

 

In App.component.ts, we need to import the following,

1. ViewChild, ViewContainerRef, and ComponentFactoryResolver from @angular/core.
2. ComponentRef and ComponentFactory from @angular/core.

App.component.ts

import {
  Component,
  ComponentFactoryResolver,
  ViewChild,
  ElementRef,
  ViewContainerRef,
} from '@angular/core';
import { DynamicComponent } from './dynamic/dynamic.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  @ViewChild('container', { read: ViewContainerRef })
  container!: ViewContainerRef;
  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
  add(): void {
    // create the component factory
    const dynamicComponentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    // add the component to the view
    const componentRef = this.container.createComponent(dynamicComponentFactory);
  }
}

In add() method we will create the component factory and add the component view.

Step 5

 

Now, we can assign the id in app.component.html

<ng-container #container></ng-container>

ng-container

 

ng-container is a directive. It will avoid creating that extra div, we can instead use ng-container directive and it can also provide a placeholder for injecting a template dynamically into the page.

 

The template for AppComponent is as below,

<button (click)="add()">Dynamically Add Component</button>
<!-- insert the dynamic components -->
<ng-container #container></ ng-container >

In an app component click on Dynamically Add component event showing the dynamic component.

 

The template for dynamicComponent is as below,

 

dynamic.component.html

<p>Dynamic Component </p>

Step 7

 

Now we will run the application

 

ng serve

 

 

 

On successful execution of the above command, it will show the browser.

 

 

Conclusion

 

After reading this, you know more about dynamic component and how to practice it in the way.