Angular is one of the most powerful frameworks for building web applications, but like any technology, it has its quirks and performance challenges. With a bit of tuning and understanding of the framework's inner workings, you can significantly improve the performance of your Angular applications. Here’s a roadmap for optimizing Angular performance, peppered with hands-on examples and tips.

1. Change Detection Strategy

Angular uses a mechanism known as change detection to track changes in your app's state. By default, Angular uses a strategy called CheckAlways, which can cause the application to check every component after any change. This can be costly in terms of performance.

Example: Using OnPush Strategy

For components that do not change often, setting the change detection strategy to OnPush can be a game-changer.

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyComponent {
  // Your logic here
}

With OnPush, Angular will only check the component when any of its input properties change, which can dramatically increase performance.

2. Lazy Loading Modules

Loading everything at once can slow down your application significantly, especially if it has a lot of modules. Lazy loading allows you to load modules only when they are needed.

Example: Setting Up Lazy Loading

Here's how you can set up lazy loading in your Angular application:

In your app routing module, you can define routes like this:

const routes: Routes = [
  { 
    path: 'feature', 
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) 
  },
];

This will ensure that the feature module is only loaded when a user navigates to the /feature route, keeping the initial load time minimal.

3. TrackBy for ngFor

When rendering lists using *ngFor, Angular can sometimes re-render the entire list if a change happens. Utilizing the trackBy option helps Angular to keep track of which items have changed, thus improving the performance.

Example: Implementing TrackBy

Here’s how to implement trackBy in your templates:

<ul>
  <li *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</li>
</ul>

And in your component:

trackByFn(index: number, item: any): number {
  return item.id; // Unique identifier for each item
}

4. Detaching the Change Detector

In some scenarios where you have components with many bindings but don't intend to update them frequently, it can be beneficial to detach the change detector manually.

Example: Detaching the Change Detector

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

constructor(private cdr: ChangeDetectorRef) {
  this.cdr.detach();
}

// To reattach when necessary
this.cdr.reattach();

This way, the component won’t participate in Angular’s change detection tree, which can boost performance for static content.

5. Service Worker and PWA

Implementing a service worker is an excellent way to cache assets and API calls, reducing load times dramatically.

Example: Adding Service Worker to Your Angular App

You can easily add a service worker using Angular CLI:

ng add @angular/pwa

This command automatically configures the app for use as a Progressive Web App (PWA) and includes service workers to handle caching out of the box.

6. Avoiding Unnecessary Bindings

Excessive binding can lead to performance degradation. Always aim to minimize the number of bindings within a component. Use local variables or caching within the component for computations that don’t change often.

Example: Caching Computed Values

get computedValue() {
  if (!this._computedValue) {
    this._computedValue = this._heavyComputation();
  }
  return this._computedValue;
}

By avoiding recalculating on every change detection cycle, you can greatly enhance performance.

7. Using Pure Pipes

Another effective way to optimize performance is by utilizing pure pipes in your application. Pure pipes provide cached, immutable results based on their inputs, which can reduce the number of recalculations.

Example: Creating a Pure Pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filterPipe',
  pure: true,
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if (!items || !searchText) {
      return items;
    }

    return items.filter(item => item.name.includes(searchText));
  }
}

With the pure option enabled, Angular will only execute the filter logic when the items or searchText change.

8. Optimize Template Bindings

Lastly, optimize your templates by minimizing the complexity within your bindings. Utilize methods and properties carefully as they can cause performance lags when Angular re-evaluates them frequently.

Example: Avoid Complex Expressions in Templates

Instead of doing this:

<div>{{ complexCalculation(value) }}</div>

Pre-compute the value in your component:

get computedValue() {
  return this.complexCalculation(this.value);
}

Then use it in your template:

<div>{{ computedValue }}</div>

By following these strategies and examples, you’ll create Angular applications that are not only robust but also perform exceptionally well.