Testinium Tech
Published in

Testinium Tech

Dynamic Component Loading

Angular 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.

Our core package

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.

info-banner.component.html

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.

Final info banner

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 👋

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store