Dynamically Creating Components with Angular

In this article, we will learn how to create components in Angular dynamically.

First, we need a component.

For the simplicity, we are going to use a simple alert component that will take as Input the alert type.

Next, If you think about it, eventually components are DOM elements so when you need to add an element, you need a place to “put” it.

In Angular, this place is called a container.

In the my-app component, we are creating a template element. We are also using the hash symbol (#) to declare a reference variable named alertContainer. The template element is the place, or in the Angular world, the container.

Note: The container can be any DOM element or component.

Now we need to get a reference to our template element in the my-app component.

We can get a reference to the template element with the ViewChild decorator that also takes a local variable as a parameter.

The default return from the ViewChild decorator is the component instance or the DOM element, but in our case, we need to get the element as ViewContainerRef.

As the name suggests, ViewContainerRef is a reference to a container. ViewContainerRef stores a reference to the template element ( our container ) and also exposes an API to create components.

You can see the nativeElement

Let’s add two buttons that will help us to create the alert component.

Before we proceed to the createComponent() method, we need to add one more service.

The ComponentFactoryResolver service exposes one primary method, resolveComponentFactory.

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

You can think of ComponentFactory as an object that knows how to create a component.

As you can see the ComponentFactory exposes the create() method that will be used by the container ( ViewContainerRef ) internally.

Now for the final step.

Let’s explain what is happening piece by piece.

Every time we need to create the component we need to remove the previous view, otherwise, it will append more components to the container. (not required if you need multiple components)

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

We are calling the createComponent() 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.

Now we have a reference to our new component, and we can set the type Input.

You can also subscribe to a component Output like this:

And don’t forget to destroy the component:

The last step is to add your dynamic components to the entryComponents section:

🚀 In Case You Missed It

• Akita: One of the leading state management libraries, used in countless production environments. Whether it’s entities arriving from the server or UI state data, Akita has custom-built stores, powerful tools, and tailor-made plugins, which all help to manage the data and negate the need for massive amounts of boilerplate code.
• Spectator: A library that runs as an additional layer on top of the Angular testing framework, that saves you from writing a ton of boilerplate. V4 just came out!
• And of course, Transloco: The Internationalization library Angular 😀

Follow me on Medium or Twitter to read more about Angular, Vue and JS!