#dynamic components

What are the Dynamic Components:

Dynamic components are instantiated and used in an application at runtime. They are reusable and used in any framework/library making building large-scale apps way easier.

How to use Dynamic Components in Angular Project:

Firstly, Generate a new Angular project, and make sure that you have the angular CLI installed and setup accordingly.

Examples:

ng-template :

It allows declaring a part of the HTML in the Angular Template. So, it is a better way to give a chance to use dynamism in our component which will be used in other components.

In your app.component.html file, Add ng-template in your HTML file.

<ng-template #test></ng-template>

If you run your application, you will not see text rendering on your component. This is because the text is not loaded yet in your DOM. Currently, ng-template grabbed it and used it in other components where it was needed.

How to grab the HTML template in your component:

Steps:

1. Viewchild:

This is an Angular Decorator that will configure the view query. It matches the selector that view in the DOM. It also takes the local variables as a parameter.

Import ViewChild from ‘angular/core’;

export class AppComponent implements OnInit, AfterViewInit{ @ViewChild(‘test’, { read: ViewContainerRef }) container;}

2. ViewContainerRef:

ViewContainerRef is a reference for a container. It stores a reference to the template element.

<ng-template #test></ng-template> <button (click)="addComponent('success')">Create success alert</button> <button (click)="addComponent('danger')">Create danger alert</button>

Before we go to the click method , we need to add a new service The ComponentFactoryResolver service exposes one primary method, resolveComponentFactory.

3. ComponentFactoryResolver:

Generally, the Angular compiler generates a ComponentFactory for any component referenced in a template. They load at runtime because there are no selector references in the templates for dynamically loaded components.

constructor(private resolver: ComponentFactoryResolver) {}

addComponent (type) { this . container . clear (); const factory : ComponentFactory = this .resolver. resolveComponentFactory (TestComponent); this . componentRef = this . container . createComponent ( factory ); this . componentRef . instance . type = type; // this.componentRef.instance.output.subscribe(event => console.log(event)); } 

The resolveComponentFactory() method takes a component and returns a ComponentFactory.

Details:

1. this. container. clear ();

While loading another view, we have to remove the previous view, otherwise, it will append more components to the container.

2. const factory : ComponentFactory = this .resolver. resolveComponentFactory (TestComponent);

The resolveComponentFactory() method takes a component and returns the recipe for how to create a component.

3. We are calling the addComponent() method with the recipe. Internally this method will call the create() method from the factory and will append the component as a sibling to our container.

this. componentRef = this . container. createComponent ( factory );

Now we have got a reference to other components, and we can set the type Input as:

this. componentRef . instance. type = type;

4. You can also subscribe to a component Output like this:

this.componentRef.instance.output.subscribe(event => console.log(event));

5. And don’t forget to destroy the component:

ngOnDestroy() { this.componentRef.destroy(); } 

6. Add your dynamic components to the entry components section:

@NgModule({ entryComponents: [ TestComponent ], }) export class AppModule {}

Related blogs:

1. Getting Started with Angular Material | Tudip

2. Difference between React and Angular | Tudip

3. Angular universal: Angular server-side rendering | Tudip