Creating your first dynamic component in Angular

In this recipe, you'll learn how to create dynamic components in Angular, which are created dynamically on-demand based on different conditions. Why? Because you might have several complex conditions and you want to load a particular component based on that, instead of just putting every possible component in your template. We'll be using the ComponentFactoryResolver service, the ViewChild() decorator, and the ViewContainerRef service to achieve the dynamic loading. I'm excited, and so are you!

Getting ready

The project that we are going to work with resides in chapter01/start_here/ng-dynamic-components inside the cloned repository:

1. Open the project in Visual Studio Code.
2. Open the terminal and run npm install to install the dependencies of the project.
3. Once done, run ng serve -o.

   This should open the app in a new browser tab and you should see something like the following:

   Figure 1.11 – The...