Common Angular Performance Mistakes

In this tutorial, you will learn common Angular Performance mistakes and how to fix them. There are many common Angular Performance mistakes.

1. Using Default Change Detection

By default, Angular uses the Default change detection strategy.

The default change detection strategy means Angular checks components on every change detection cycle.

Example:

@Component({
selector: 'myapp-example',
})

You should use OnPush Change Detection

Example:

@Component({
selector: 'myapp-example',
changeDetection: ChangeDetectionStrategy.OnPush
})

2. Mutating (New form) of Objects and Arrays

Angular relies on reference changes.

❌ Mistakes

// suppose you are adding name into user Object
this.user.name = 'John'; // Object example
// suppose you are adding newItem into items array
this.items.push(newItem); // array example

✅ Correct way

// suppose you are adding name into user Object
this.user = { ...this.user, name: 'John' };
// suppose you are adding newItem into items array
this.items = [...this.items, newItem];

3. Implement Heavy Logic Inside Templates

You should not implement heavy logic inside the template file.

❌ Mistakes

<p>{{ MultiplyEvenNumbers() }}</p>

✅ Correct way

You have to implement logic in the component ts file.

calculate = this.MultiplyEvenNumbers();

4. Not Using trackBy in *ngFor

If you are not using trackBy in *ngFor, then Angular recreates DOM elements unnecessarily.

❌ Mistakes

<div *ngFor="let item of items">{{ item.name }}</div>

✅ Correct way

<div *ngFor="let item of items">{{ item.name }}</div>

// component.ts file
trackById(index: number, item: any) {
return item.id;
}

5. Too Many Subscriptions (Memory Leaks)

If you are using manually subscribing without unsubscribing then the causes of performance and memory issues.

❌ Mistake

this.data$.subscribe(data => this.data = data);

✅ Correct way

<p>{{ data$ | async }}</p>

Note: When we use | async then it will be automatic unsubscribe.

6. Loading Everything at Once (No Lazy Loading)

When you use loading everything at once then large bundles will slow down in initial load time.

✅ Solutions

You can create modules according your requirement.

{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
}

Common Angular Performance Mistakes – Interview Questions