Lazy Loading Components into ng-template

Photo by Thuận Minh on Unsplash

Lazy loading is a powerful technique used in modern web development to optimize the loading performance of applications. In the context of Angular, lazy loading is often associated with routes and modules, where modules are loaded only when they are actually needed. However, lazy loading can also be applied to components within templates, providing a way to improve the initial load time of a page containing multiple components.

In this article, we will explore how to lazy load components into ng-template elements in Angular using the import syntax. We'll delve into the advantages of this approach and provide code examples to demonstrate the process, especially in scenarios involving multiple components.

The Advantages of Lazy Loading Components

Lazy loading components offer several advantages, especially in scenarios where a page contains multiple components, but not all of them are needed immediately. Some of the key benefits include:

1. Faster Initial Load: By loading only the necessary components initially and deferring the loading of others until they are actually displayed, you can significantly reduce the initial load time of your application.
2. Improved Performance: Smaller initial payloads lead to faster page rendering and improved overall performance. Users can start interacting with the visible content sooner.
3. Reduced Memory Footprint: Loading fewer components upfront results in a reduced memory footprint, as the browser doesn’t need to allocate resources for components that aren’t immediately visible.
4. Enhanced User Experience: Faster load times and improved performance contribute to a better user experience, reducing the likelihood of user frustration due to slow-loading pages.

Lazy Loading Components into ng-template

In Angular, components can be dynamically loaded using the import syntax, which is a powerful feature that enables us to achieve lazy loading within the context of templates. Here’s how you can do it:

1. Create Lazy Components: First, create the components that you want to lazy load. These components should have their own modules.
2. Import Syntax: To lazy load a component, import it using the import() function within the component where you want to use it.
3. Dynamic Component Loader: Utilize Angular’s viewContainerRef to dynamically load the component and render it within the template.

Code Examples for Multi-Component Scenario

Let’s consider a scenario where you have a page that can display different types of content, each represented by a separate component. Instead of loading all components upfront, we’ll lazy load them as needed.

Suppose we have three components: ImageComponent, VideoComponent, and TextComponent.

1. Create Modules: Start by creating separate modules for each component:

// image.module.ts
@NgModule({
  declarations: [ImageComponent],
  // ...
})
export class ImageModule {}

// video.module.ts
@NgModule({
  declarations: [VideoComponent],
  // ...
})

export class VideoModule {}
// text.module.ts
@NgModule({
  declarations: [TextComponent],
  // ...
})
export class TextModule {}

2. Lazy Load Components: In the component where you want to display these components, use the import syntax to lazy load them:

import { Component } from '@angular/core';

@Component({
  selector: 'app-content',
  template: `
    <ng-template #contentContainer></ng-template>
  `,
})
export class ContentComponent {
@ViewChild('contentContainer', { read: ViewContainerRef})
  contentContainerTpl: ViewContainerRef;

  async loadComponent(type: string) {
    let component;
    if (type === 'image') {
      component = await import('./path-to-image.module').then({ ImageComponent } => ImageComponent);
    } else if (type === 'video') {
      component = await import('./path-to-video.module').then({ VideoComponent}  => VideoComponent);
    } else if (type === 'text') {
      component = await import('./path-to-text.module').then({ TextComponent } => TextComponent);
    }

    this.contentContainerTpl.createComponent(componentModule);
  }
}

In this example, the loadComponent method takes a type parameter indicating which component to load. It uses the import syntax to dynamically load the appropriate component and then render it using the createComponent.

1. Using Lazy Loaded Components: In your template, use the ng-template and call the loadComponent method to load the desired component:

<button (click)="loadComponent('image')">Load Image Component</button>
<button (click)="loadComponent('video')">Load Video Component</button>
<button (click)="loadComponent('text')">Load Text Component</button>
<ng-template #contentContainer></ng-template>

By clicking the buttons, you can dynamically load and display the corresponding components within the ng-template.

Conclusion

Lazy loading components into ng-template elements using the import syntax is a powerful technique for optimizing the loading performance of Angular applications. It allows you to selectively load components only when they are needed, leading to faster initial load times, improved performance, and a better user experience. By leveraging Angular's dynamic component loading capabilities, you can enhance the efficiency of your application without sacrificing functionality.

Follow me on Twitter, Medium, and Linkedin to read more!