Increase performance of Angular application. Use change detection correctly.
By: Yurii Kuznietsov
Tags: Programming, Angular, Web Development, Angular2, Front End Development

Angular guid

Increase performance of Angular application. Use change detection correctly.

Perfomance in angular

Before we start to discuss change detection strategy, we need to discuss mutable and immutable types.

Mutable is a type of variable that can be changed (object, array, functions). Immutable is a type whose state cannot be changed once the object is created (string, number, boolean).

We can’t change string value, every time when we change string value we a make a new string. When we work with object we can change any property. It’s important to know that.

Example of mutable and immutable

Change detection strategy

In html we can write “<label>User name {{name}}</label>”, if the name has changed we must show it, how this happens? Every component in angular has a change detector, if something changed change detector is know it.

There are two change detection strategy: default and onPush.

If you do not setup change detection strategy in your component it will be ‘default’.

Imagine component tree, by default if something changed in main component every inner component in tree will be checked, it compare previous value and new value, if they are different the new value will be shown.

Default strategy

Sometimes not all components must be checked and display a new value. If you have 5–10 components on page it will be not a big issues but if you have 50–100 components in your tree, those checks will be a huge waste of a time. When one value changed this cycle will be repeated over and over again.

OnPush strategy

OnPush strategy works differently, if link on input object has changed it will notify components about it. If the property of input object is changed components in tree will not be notified.

OnPush strategy

Let’s make a small component tree.

Out component tree

We have 3 components and 1 input object. MainComponent -> SubComponent -> DeepComponent. In main component we have 2 methods that can change name and surname of the user.

If we choose ‘Default’ change detection strategy when we click on buttons everything work fine, every component in tree was notified.

ChangeDetectionStrategy.Default

But when we set ‘OnPush’ change detection strategy and start click on buttons nothing happens, because link on the input object not changed we just changed property of this object.

ChangeDetectionStrategy.OnPush

Let’s make another two methods that change name and surname but we also will make a new object with new properties.

Methods where we create a new object

Now it works because we replaced old object by a new one.

Create a new object with changed properties

ngDoCheck

What if we do not want to make a new copy of input object because this object is very big. One of the solution is use a ‘ngDoCheck’ method.

When we change property of input object by click on button we triggered ‘ngDoCheck’ method of sub component. In this method we need to check change manually. If we found a change we need to tell about it Angular, for that we need to use a ChangeDetectorRef class.

‘ngDoCheck’ method

‘ngDoCheck’ result

As you can see when we changed surname ‘ngDoCheck’ of ‘DeepComponent’ was not called, because in ‘SubComponent’ we are not handle this situation and we are not called ‘markForCheck’ method. This method notify about changes only sub components in hierarchy.

Also Method ‘ngDoCheck’ in sub components will not be triggered if we use ‘setTimeout’ method or waiting response from server. For handle those situations we need to use ‘markForCheck’ method in ‘ChangeDetectorRef’ class.

setTimeout methods

setTimeout result

Another solution for ‘OnPush’ strategy is make an observer service and make a subscription on it.

Now we know different change detection strategy and how different strategy can increase performance of our app.

If you need to take a close look on project here is the link.