How to Load Component Lazily (Dynamic Components)

3 min readFeb 21, 2020

With the release of Angular Version 9, we had may new awesome features, you can have a look at all changes and everything here, In this article, I will be talking about Lazy Loading of component (Dynamic Component). Yes, you read it, right? Now with the release of angular version 9. It is also possible to load component Lazily.

I hope you already created the application using the latest version of angular i.e. version 9. if not please create the new application by writing the following command.

ng new demoLazyComponent

Create a new component

ng g c demo1 --skip-import --skip-selector

the above command will generate the new component with the name of the demo1 component.

--skip-import will not include the demo1 component to our    app.module.ts file as we don't want to load it eagrly. if we import demo1.component to our module file it will load it eagerly.--skip-selector will also not create the selector for our demo1.component because we are not referencing them in out html file.

so by now, we had generated a new component and also didn’t registered that component to our module file and also not created a selector for that component. do you remember the exact scenario when you generated a component and neither imported in app.module nor used selector for that component? let me remind you of the exact scenario. think of the component which you had used as ModalBoxComponent. Like a message box. If you have ever used MatDialog of angular material you will easily recall the scenario. we are displaying our component through MatDialog.open() method. before angular version 9, we must have to declare those components to entryComponent array in NgModule, otherwise angular doesn’t recognize those components. But now with the release of angular version 9 and Ivy it possible to load components without using entryComponent.

Lazy Loading of Components

make changes to app.component.html and app.component.ts file as shown below,

app.component.html

app.component.ts

Here we had injected ViewContainerRef and ComponentFactoryResolver in our constructor.

ViewContainerRef will provide a place to put our components.

ComponentFactoryResolver will create our component.

loadComponent method will be called when we pressed the button from our template file. here Clear method is important, if we didn’t call the clear method and load another component lazily it will display both the components one after another.

now let’s run the application and open browser’s developer tool to see whether the component is loaded lazily or not.

when we serve the application — app.component.ts

Demo1.component Loaded Lazily on the press of a button

What if that lazily loaded component having a property that we need to set when we create the component?

so now let us say demo1.component.ts had one property called data which need to set when anyone creates/display that component. so in our case, we are creating/displaying a demo1 component on app.component.ts, so we have to set data property of demo1.component.ts from app.component only. we can communicate to the dynamic components property using ViewContainerRef. to do so make the following adjustment as shown below,

demo1.component.html

demo1.component.ts

so far only created data property on demo1.component and bind it to the template using a string interpolation method.

now made a change to app.component.ts as shown below,

here we are using cmpref.instance.data to set the value of our dynamic component.

Summary

so now with the release of angular version 9, it is also possible to load the component lazily without using NgModule.hope you find it useful.