Software systems to innovate and grow

Bringing Dynamic Components to Angular

By Engineering Team December 21, 2018 10 mins read

As you may know from developing different web applications, component templates are not always fixed. An application may need to instantiate and load new components at runtime. Thankfully, Angular provides its own API for loading components dynamically. Discover the angular way with a working example of an application, by creating different instances of dynamic components to be displayed to the user. Dynamic components are reusable and make building large-scale applications much easier. You will learn to programmatically create and load components at runtime to help simplify this process.

Example Code and Explanation

For this example, we are going to build an app that creates and shows modals. The app attaches to the modal by attaching to the body element. This way you’ll only have one modal displayed at a time. The main component presents the user a button to show a modal.

Bringing Dynamic Components to Angular

Dynamic Component

For simplicity, the app uses a simple component called ModalComponent, displaying a modal based on Bootstrap modals.

Modal Displayed

Bringing Dynamic Components to Angular

modal.component.html

The ModalComponent receives as an input in the modal options, including the title and the body text.

The ModalOptions model is defined like this:

modal.options.ts

The ModalComponent uses the ModalGeneratorService to destroy itself when the close button is clicked and the element is removed from the screen.

modal.component.ts

Component Generator Service

The app uses a service to dynamically create the component.
The ModalGeneratorService has two exposed methods:

  1. addModal to add the dynamically created component. It will receive parameters, and the modal component adds together with the modal options.
    • This method uses the ComponentFactoryResolver service to add components dynamically. This service has an exposed method called resolveComponentFactory.
    • Basically what it does is takes a component and returns a ComponentFactory. The name is self-explanatory, it is an object that knows how to create components
    • To add a component the ComponentFactory exposes a method which is called in this case an Injector. The modal is added to the AppRef so that the modal component can be created using the Angular’s default Injector, provided in the constructor. The modalOptions are passed to the modal component assigning them to the instance.
  2. removeModal basically detaches the modal view from the ApplicationRef so Angular is able to change detection. Otherwise, it won’t recognize the element. The ComponentRef is destroyed after removing the DOM element from the body.

modal-generator.service.ts

The Main Component

The AppComponent is the main component in charge of defining what modal is going to be created and displayed in the button to add that modal. For this example the AppComponent imports the ModalComponent and adds it through the ModalGeneratorService addModal method, passing the component and the modal options as parameters.

app.component.html

app.component.ts

Wrapping Everything Up

The last changes are applied to the module declaration, in this case, the AppModule.

Here is where all the dependencies are imported. One thing to keep in mind is to define the entryComponents. Basically, add the ModalComponent to entryComponents in AppModule declaration. This allows Angular to create the ModalComponent on the fly.

app.module.ts

Hopefully, you now have a better understanding of what bringing dynamicity to Angular components can do. With an example to show how to create a component dynamically as well as the modules and services provided by Angular, you should be able to achieve this task. You may need to load a component dynamically in various scenarios, such as displaying different popup modals or alerts across an app. Some benefits of the dynamic components are that they are reusable and make building large-scale applications much easier. I hope this article helped you gain a better understanding of dynamicity in Angular.