Dynamic Components in Angular | Tudip
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
4. Creating a simple library using Angular CLI6 | Tudip
