Notifications 0

CodeGoundAI

ReadsNew

Speed TestNew

Code Grounds

RustGo LangNode JSPython 3C++JavaWeb(HTML, CSS, JS)

Data Grounds

RedisMongoDBPostgres

Tools New

Epoch ConverterCanvas Drawing boardBase64 EncodeBase64 DecodeJSON Web TokensJSON Diff

Popular

ReadsGrounds

Features

Realtime SharingShared OwnershipFast CompilationCloud Storage

Contact us

[email protected]

More to Explore

Sitemap

We @ CodeGroundAI

About UsPrivacy Policy

Lazy Loading in Angular

Ashutosh Singh - March 24, 2025


Create the Lazy-Loaded Component


In the application, add a new component using the Angular CLI command, as shown below.

ng g c hello --flat --skip-import

Here --skip-import flag is used so that Angular does not declare HelloComponent in the module, as you wish to load HelloComponent dynamically.

Next, add code in HelloComponent as shown in the next code listing:


import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `
  <h1>Greetings</h1>
  <h2>{{helloMessage}}</h2>
  <button (click)='hello()'>sayHello</button>
  `

})
export class HelloComponent implements OnInit {

  @Input() helloMessage: string;
  @Output() sendMessageEvent = new EventEmitter();
    
  constructor() { }
  ngOnInit(): void {
  }

  hello(): void {
    this.sendMessageEvent.emit('Hello From Hello Component');

  }
}



HelloComponent has an @Input() decorated property to accept data from the parent component and an @Output() decorated EventEmitter so that the event raised here can be handled in the parent component. The parent component is a component in which HelloComponent will be loaded dynamically.



Lazy Load in the Parent Component


You can lazily load a component in any other component, hence creating a parent-child relationship between them. You want to lazy load HelloComponent on the click of the button in the parent component, so to do that add a button as shown next.


<h1>{{message}}</h1>
<button (click)='loadHelloComponent()'>Hello</button>



Next, in the constructor of the parent component inject ViewContainerRef and ComponentFactoryResolver classes:


 constructor(private vcref: ViewContainerRef,
    private cfr: ComponentFactoryResolver){ }



As of the official documentation, ComponentFactoryResolver class is a simple registry that maps components to generated ComponentFactory classes that can be used to create an instance of the component using the create() method.

The ViewContainerRef represents a container where one or more views can be attached. It can contain host views by instantiating a component with the createComponent() method.

To lazy load the component, we will use the import() method inside an async/await function.




async loadHelloComponent(){
    
    this.vcref.clear();
    const { HelloComponent } = await import('./hello.component');
    let hellocomp = this.vcref.createComponent(
      this.cfr.resolveComponentFactory(HelloComponent)
    );
  
  }


The above function first clears the container; otherwise, on every click of the button, the new instance of HelloComponent would be added in the container. After that, the function imports the HelloComponent using the import method. By using await syntax, it loads the component asynchronously. Once the reference of HelloComponent is loaded, it creates the component on the view container using the createComponent method and bypassing resolveComponentFactory method in it.

Now when you click the button, you will lazy load the HelloComponent inside the parent component.


Passing Data to Lazy-Loaded Component


Angular allows us to pass data to @Input() decorated properties and handle events of lazy-loaded components using the instance property of the lazy-loaded component. For example, you can pass data and handle an event of HelloComponent in the parent component as shown in the next code listing:


hellocomp.instance.helloMessage = "Data Passed from Parent";
    hellocomp.instance.sendMessageEvent.subscribe(data=>{
      console.log(data);
    })



As you see, you can use instance to access the properties and events of the lazy-loaded component.


Using then() Instead of await


Sometimes it is not possible to make a function async. Hence, you cannot use an await statement as we did earlier. In this scenario you can use promise’s then method to lazy load a component as shown in the next code listing:

  loadHelloComponent() {
    this.vcref.clear();
    import('./hello.component').then(
      ({ HelloComponent }) => {
        let hellocomp = this.vcref.createComponent(
          this.cfr.resolveComponentFactory(HelloComponent)
        );
        hellocomp.instance.helloMessage = "Data Passed from Parent";
        hellocomp.instance.sendMessageEvent.subscribe(data => {
          console.log(data);
        })
      }
    )
  }


In the above function, everything is the same. It just promises the then method is used instead of async-await statements.


Using a Module in the Lazy-Loaded Component


Sometimes a lazy-loaded component relies on other modules. For example, let’s say HelloComponent is using [(ngModel)] as shown in the next code listing:

 template: `
  <h1>Greetings</h1>
  <h2>{{helloMessage}}</h2>
  <input type='text' [(ngModel)]='message' />
  <h3>Hello {{message}}</h3>
  <button (click)='hello()'>sayHello</button>
  `

HTML

As ngModel is the part of FormsModule, when you use it inside a lazy-loaded component, Angular complains about that with error: Can’t bind to ngModel since it isn’t a known property of input.

This problem can be fixed by importing FormsModule inside the HelloComponent itself. With that inside the same file hello.component.ts, create a module and pass FormsModule inside the imports array as shown in the next code listing:

@NgModule({
  declarations: [HelloComponent],
  imports: [FormsModule]
})
class PlanetComponentModule {}

TypeScript

You have to create ngModule in the same file in which the component is created and pass all the dependent modules in the imports array.



Lazy Loading Components in ng-template


To lazy load a component inside a particular location in the template, you can use ViewChild. Let’s say you wish to lazy load HelloComponent inside the #hellotemp template of the parent component.

<div>
    <ng-template #hellotemp></ng-template>
</div>

HTML


To do this, refer hellotemp as a ViewChild in the parent component class as shown in the next code listing:

  @ViewChild('hellotemp', { read: ViewContainerRef })
  private helloviewcontainerref: ViewContainerRef;

TypeScript



Here we are reading the ng-template as ViewContainerRef so that the component can be loaded to it, and finally, you can lazy load a component inside it as we did earlier:

async loadHelloComponent(){

    this.vcref.clear();
    const { HelloComponent } = await import('./hello.component');
    let hellocomp = this.helloviewcontainerref.createComponent(
      this.cfr.resolveComponentFactory(HelloComponent)
    );
    hellocomp.instance.helloMessage = "Data received from patient";
    hellocomp.instance.sendMessageEvent.subscribe(data=>{
      console.log(data);
    })

  }





CodeGroundAI

CodeGroundAI is your all-in-one platform for seamless online coding. Whether you're a beginner or a pro, our IDE supports multiple programming languages, offers real-time collaboration, and provides a comprehensive toolkit for debugging, testing, and code execution.

Explore tools like the EPOCH Convertor, JSON Diff Checker, JWT Decoder, and Base64 Encoder/Decoder. With a real-time code-sharing platform and advanced comparison utilities, CodeGroundAI ensures you have everything you need for efficient development and accurate data handling.

Languages
  •  NodeJs
  •  Python
  •  Rust
  •  C++
  •  Java
  •  Golang
  •  Web
  •  MongoDB
  •  Redis
  •  Postgres
Tools
  •  Epoch Converter
  •  JSON Differentiator
  •  JWT Debugger
  •  Base64 Decode
  •  Base64 Encode
  •  Canvas
  •  Speed-Test
  •  Reads
Contact Us

Have questions or need support? Reach out to us for a smooth coding experience.

[email protected]

Connect with us on your favourite platform.

CodeGroundAI © 2024. All rights reserved.