Dynamic Component Loading
In this article, I will talk about dynamic component loading in Angular. I will implement the loader with the showing info messages.
I don’t write about how to create an angular app from scratch here. If you want to see the full code I will share it in the end. You can check it out.
Let’s get started:
First, we create the info core folder. It has four elements (water, earth, fire, and air… :D ofc not them). These are; info-item, info.component, info.directive and info.service.
Info.componentdeclares info component interface and Info.item helps us create an info component.
Then we must declare our anchor point and that is info directive. The info banner uses it to mark valid insertion points in the template.
We create a function inside our service to pull information items. In a real project, you can connect this to your service.
Loading components
We will bind our elements with infoHost selector. The <ng-template> element is a good choice for dynamic components because it doesn't render any additional output.
Resolving components
In our component, we fetch all info elements with getInfosFromService() method. Then changeInfos() function cycles through the array of InfoItems and reloads a new component every appointed time by calling loadComponent().
The loadComponent() method takes an info item according to its index. (The index always resets after it reaches the end of the info item array.) After that we are targeting the viewContainerRef that exists on this specific instance of the component. We find where to add our dynamic components through our infoHost directive.
InfoDirective injects ViewContainerRef into its constructor. This is how the directive accesses the element that you want to use to host the dynamic component.
On this point, we need to add the component to the template, so we call createComponent() on ViewContainerRef.
The createComponent() method returns a reference of the component that we loaded. Later we use that reference to interact with the component by assigning to its properties or calling its methods.
If we want to pass data through the components dynamically, we set instance.data .
In this example, I set the onClickInside EventEmitter to stop interval when the component is clicked, and also set the remove component behavior when the close button is clicked via onRemove EventEmitter.
Conclusion
At the end of this project, we learned how to add and remove components dynamically. As you can see, it is not a difficult process and can be adapted to different samples.
You can check the final project below:
Angular Dynamic Component Loading
I hope you enjoy while reading.
Until next time, farewell 👋
