Angular template loading strategies for efficient web applications

In web application development using angular framework, it is very important to load the components in such a way that it does not affect the whole application’s process speed. Now to achieve the same, angular has many built-in robust features. A few of the loading strategies are below

Different loading strategies for templates

We have different ways or strategies for template loading in angular. here we will explain some of them, that will help us to implement efficient web web applications.

1. Lazy Loading Modules & Images

Generally, an angular app will not lazy load any of its modules unless we provide the functionality for the same. If any of the modules in the app are lazy loaded, then if we don’t provide the matching route for that module, the module won’t load until the routes are matched. Once the routes are matched, the module loads, and we can access the components inside it accordingly. If we re-fetch the same route after loading, no loading action will occur because the module is already loaded.

Lazy loading of modules is the best way for large enterprises’ web applications to achieve smooth operation. The below example shows the code for achieving lazy modules in angular apps.

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; 

const routes: Routes = [ 
{ path : 'app', loadChildren : () => import('./hash-module/hash.module').then(m => m.HashModule) } 
]; 

@NgModule({ 
imports: [ RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) ], 
exports: [RouterModule] 
})

export class AppRoutingModule { }

The above code when executed, will load the HashModule module lazily.

2. Using OnPush change detection strategy

Angular detects changes in the component data model or the template through the mechanism of change detection. Angular framework detects changes by any one of these two strategies.

(1) Default:

(2) OnPush: In this strategy, change detection triggers based on certain criteria only. For example, this strategy triggers when the reference of an input value changes. The @Input decorator decorates the component class’s variables, which represent input values.

Also, triggering an event handler triggers this change detection. To achieve this strategy, we just have to pass a key-value pair to the configuration of the @Component decorator. The key here will be ‘changeDetection‘ & the value for it will be ‘ChangeDetectionStrategy.OnPush’. Here, ChangeDetectionStrategy is an ENUM.

3. Using Immutable data structures

Immutable data structures improve the performance of the application by preventing unnecessary data manipulation. The code snippet below shows the same.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  items = Object.freeze([
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ]);
}

4. Use RxJs for Reactive Programming

RxJs stands for Reactive Extension for Javascript. The below example shows the execution of Observable in a component.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
@Component(
{ selector: 'app-example',
 template: ` <h1>{{ count$ | async }}</h1> '
<button (click)="increment()">Increment</button> `
})

export class ExampleComponent implements OnInit {

 count$: Observable<number>;
private count = 0;

ngOnInit() {
 this.count$ = new Observable(subscriber => {
 setInterval(() => {
 this.count++; subscriber.next(this.count);
}, 1000); });
}

increment() {
this.count++;
}
}

Conclusion

In Angular, it is very important to add an exact template loading strategy as there are various templates in applications and we should load only those we need to show for other templates, we should follow lazy loading to make our application lightweight so users can use the application smoothly, so here I have mentioned few ways of template loading that is very useful in angular.

For more such posts, please follow our LinkedIn page- FrontEnd Competency.