Matej Mijić

Learn how to apply different change detection strategies in Angular. Check our examples and find out which strategy works best for you.

Change Detection Strategies in Angular: Tutorial + Examples

Learn how to apply different change detection strategies in Angular - and create a high-performance Angular app. 

Change Detection Strategies in Angular: Tips + Examples

Angular is a robust web framework with a remarkable feature known as change
detection. In essence, it automatically detects changes in an application’s data
and updates the view accordingly. This feature is crucial to any Angular
application.

But what’s not that widely known is that there are different strategies you can
use to optimize the performance of change detection.

In this article, we’ll go through these change detection strategies and talk
about some common pitfalls.

What is change detection?
Change detection is a feature specific to Angular. More accurately, it’s a
process used to detect changes in the application state and update the view
accordingly.

When an event occurs in an Angular application (i.e. user clicking a button or
user changing the value of an input field), Angular runs change detection to
check if there is any change in the application state.

The change detection process works by traversing the component tree in the
application. It starts from the root component and checks for changes in each
component. It will check for all changes in the component state and DOM
elements.

In short, Angular will compare current and previous values of properties and
variables defined in the component class and used in the component template.

Strategy #1: Default change detection
By default, Angular will use the CheckAlways change detection strategy. How does
this work?

Angular uses a process called dirty checking to compare the current values of
component state and DOM elements with their previous values. When an event
occurs, Angular will run change detection to check for any changes in the
template expressions in the component tree.

These expressions can be, for example, property binding, event bindings, or
interpolation expressions. And as it goes, if there is a change detected,
Angular will update the view.

When using Angular’s default change detection strategy, it will check every
component in the tree on every event, even if no changes occurred. This may not
be your best option because this can lead to performance issues. And if you have
a large number of components or nested components in your Angular application,
performance issues are more likely to occur.

Strategy #2: OnPush change detection
Luckily, a different change detection strategy exists. If you want to improve
the overall performance of your Angular application, try using the “OnPush”
change detection strategy, known as CheckOnce.

To use the OnPush strategy simply set the changeDetection property of a
component to ChangeDetectionStrategy.OnPush in the @Component decorator.

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TodoListComponent {}

_____
todo-list.component.ts


With the "OnPush" strategy, change detection is only run on a component if one
of its input properties has changed or if an event has been fired from that
component.

This means that if none of a component's input properties have changed and no
events have been fired, Angular will skip change detection for that component
and its descendants.

Using the “OnPush” change detection strategy will reduce the number of
components that need to be checked during change detection. Consequently, this
leads to an improvement in overall performance of your Angular application.

Angular DevTools
To explore these strategies, we’ll be using Angular DevTools
[https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh]
. In short, that is a browser extension providing us with debugging and
profiling capabilities for Angular applications.

In the extension, there are two tabs - Components and Profiler:

 * Components tab - explore components and directives in your Angular
   application, preview or edit their state
 * Profiler tab - profile your application, understand where the performance
   bottlenecks are during change detection execution

Example app
To better understand the difference between these change detection strategies,
here’s a simple example app that displays a list of to-do items.

The header title can be changed using a text input rendered in the app
component. Also, you can update a single to-do item by clicking on a button
rendered in the to-do list component.

1.1. Component tree and corresponding component inputsUpdating component
@Input() using default strategy
Let’s update the header component title input by using the text field rendered
in the app component.


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-cd'

  onTitleChange (title: string) {
    this.title = title
  }
}

_____
app.component.ts


<div class="app-container">
  <app-header [title]="title"></app-header>
  <div>
    <label>Title:</label>
    <input [(ngModel)]="title" type="text" /><br /><br />
  </div>
  <app-todo-list></app-todo-list>
</div>

_____
app.component.html


@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  @Input() title: string = ''
}

_____
header.component.ts


<header>
  <h1>{{ title }}</h1>
</header>

_____
header.component.html


This action will be recorded with the Angular DevTools profiler. The profiler
shows all change detection cycles and the components in which change detection
was run during that cycle.

To see only change detections after recording, you need to select the flame
graph and check the "Show only change detection" checkbox. Angular ran the
change detection in components marked with blue colour.

1.2. Change detection after applying OnPush strategy to TodoListComponentPicture
1.2 shows that change detection was run throughout the component tree, even
though only the header component input was changed.

With the default change detection, all components with template expressions ran
change detection, even when it wasn't necessary (e.g., TodoListComponent and
TodoItemComponent-s in our example).

Updating component @Input() using OnPush strategy
Let’s apply OnPush change detection strategy to TodoListComponent.

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

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
  styleUrls: ['./todo-list.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TodoListComponent {
	todoItems: string[] = ['Title 1', 'Title 2', 'Title 3']
}

_____
todo-list.component.ts


<app-todo-item
  *ngFor="let todoItem of todoItems"
  [todoItem]="todoItem"
></app-todo-item>

_____
todo-list.component.html


Now let’s record the same action and look at the flame graph in picture 1.4..
Remember, Angular ran the change detection in components marked with blue
colour.

1.4. Change detection after applying OnPush strategy to TodoListComponentBecause
we used OnPush detection strategy with TodoListComponent and since nothing
changed inside TodoListComponent Angular will skip change detection for that
component and its descendants.

What are some common pitfalls?
When using the “OnPush” change detection strategy, Angular will only do the
comparison by reference and check for changes to the reference of an input
property.

In other words, if you change the contents of the object itself, the change
won’t be detected. This can potentially lead to some frustrating,
hard-to-detect, bugs.

When you need to change the value of an input property, a better practice would
be to create a new object with new values instead of updating the existing one.

This is why it’s sometimes recommended to build Angular applications using
immutable objects and lists since we can use OnPush everywhere transparently.
And please keep in mind that the “OnPush” strategy isn’t always appropriate for
all situations.

It largely depends on how your application is structured, how your components
“communicate”, and how data flows through your components.

Final words on change detection
To conclude, Angular’s change detection strategies provide you with powerful
tools to optimize the performance and user experience of your application.

Even though using the default change detection strategy may be convenient, it’s
often resource-intensive and can lead to unnecessary processing and performance
issues.

On the other hand, OnPush change detection minimizes these drawbacks by
triggering change detection only when necessary. While using the OnPush strategy
is generally recommended, be aware of the potential pitfalls.

If you understand the challenges and capabilities of the OnPush strategy and
implement best practices, you can fully leverage its benefits and create
high-performance, responsive Angular applications.

> In case you’re looking for help with your Angular application, feel free to
reach out at hello@prototyp.digital and let us know how we can help!

Development

Change detection strategies in Angular

In this tutorial, we will go through the basics of React Native Reanimated 2 library and learn how to create smooth animations that will bring applications to life. 

Introduction to React Native Reanimated - Prototyped

React Native Reanimated
For my graduate thesis [https://dabar.srce.hr/islandora/object/etfos%3A3309], I
had to develop React Native application to promote and facilitate public
participation in solving problems with the greenery of the city. Since the
requirements for the application were simple I had time to experiment with the
animations and make my application look cool. After some research, I decided to
go with React Native Reanimated 2.

Reanimated is React Native [http://docs.swmansion.com/react-native-reanimated/] 
library developed by Software Mansion [https://swmansion.com/]. Using worklets (
JavaScript code that can be moved to a separate JavaScript VM and executed
synchronously on the UI thread ) they managed to offload animation and event
handling logic from the JavaScript thread to the UI thread which allows us to
create smooth animations without frame drops. More detailed information on
worklets and the library itself can be found in the official documentation
[https://docs.swmansion.com/react-native-reanimated/docs].

Reanimated in action
Let's create some animations and bring this screen to life!

Shared values & animated styles
For the animation, shared value needs to be created. Shared values are used to
maintain a reference to mutable data that can be read and modified across
threads since Reanimated 2.0 runs animation code in a separate thread. Shared
Value reference is created using useSharedValue hook:

const circleSize = useSharedValue(100);


Next, an animated style that "describes" the animation is created using 
useAnimatedStyle hook.

const animatedStyle = useAnimatedStyle(() => {
  return { width: circleSize.value, height: circleSize.value };
});


The width and height of the circle are equal to circleSize.value value. On
circle press, the value is set to some random number between 100 and 350.

function onPress() {
  circleSize.value = Math.floor(Math.random() * (350 - 100 + 1)) + 100;
}


Animated style is added to the style prop of Animated.View component. Also,
additional styles can be added.

return (
  <Animated.View style={[animatedStyle, styles.wrapper]}>
    <TouchableOpacity onPress={onClick} style={styles.touchableOpacity} />
  </Animated.View>
);


For now, the circle jumps to a new size each time it's pressed as presented
below:

Animation helpers like withTiming and withSpring are used to animate the circle.
The onPress() function now looks like this:

function onPress() {
  circleSize.value = withTiming(
    Math.floor(Math.random() * (350 - 100 + 1)) + 100,
    { duration: 200, easing: Easing.inOut(Easing.quad) }
  );
}


Animation helpers can be further modified by passing configuration objects like
in the example above. For more details, you can check the animations API
reference
[https://docs.swmansion.com/react-native-reanimated/docs/api/animations/withTiming]
. The circle is now smoothly changing its size:

withTiming animation helperwithSpring animation helperThere are also animation modifiers
[https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/animations#animation-modifiers] 
that can be used to further modify animations. For example, withRepeat modifier
allows us to repeat provided animation and withSequence allows us to create an
animation sequence.

withRepeat example:

function onPress() {
  circleSize.value = withRepeat(
    withSpring(300, { damping: 5, stiffness: 80 }),
    10,
    true
  );
}


withRepeat modifier examplewithSequence example

const translateXValue = useSharedValue(0);

const animatedStyle = useAnimatedStyle(() => {
  return { transform: [{ translateX: translateXValue.value }] };
});

function onPress() {
  translateXValue.value = withSequence(
    withTiming(-130, { duration: 1000 }),
    withTiming(130, { duration: 200 }),
    withSpring(0, { damping: 5 })
  );
}


withSequence modifier exampleGesture animations
TapGestureHandler
TapGestureHandler component from react-native-gesture-handler is used to handle
tap gesture animations. To use gesture handler components event handlers need to
be defined. Using useAnimatedGestureHanlder hook worklets for different gesture
states such as onStart worklet, which is called when the gesture has started,
can be defined. Now the example looks like this:

export default function TapGestureHandlerExample() {
  const pressed = useSharedValue(0);

  const eventHandler = useAnimatedGestureHandler({
    onStart: (event, ctx) => {
      pressed.value = 1;
    },
    onEnd: (event, ctx) => {
      pressed.value = 0;
    },
  });

  const animatedStyle = useAnimatedStyle(() => {
    const backgroundColor = withSpring(
      interpolateColor(pressed.value, [0, 1], ["yellow", "red"])
    );

    return {
      backgroundColor,
      transform: [
        { scale: withTiming(pressed.value ? 3 : 1, { duration: 700 }) },
      ],
    };
  });

  return (
    <View style={styles.wrapper}>
      <TapGestureHandler onGestureEvent={eventHandler}>
        <Animated.View style={[animatedStyle, styles.ball]} />
      </TapGestureHandler>
    </View>
  );
}


interpolateColor is used in the animated style in the example above. What it
does is when our pressed.value equals 0 it returns a blue color and when it
equals 1 it returns a violet color. withSpring creates a smooth transition
between color changes.

TapGestureHandler examplePanGestureHandler
PanGestureHandler is used to handle continuous gestures like the movement of a
finger on the screen. When the finger is moved across the screen a stream of
touch events is sent to onActive callback. In the next example, the slider
component is created. This is what the layout looks like:

<Animated.View>
  <AnimatedText
    style={styles.sliderValue}
    animatedProps={animatedProps}
    underlineColorAndroid="transparent"
    editable={false}
  />

  <View style={styles.wrapper}>
    <View style={styles.slider} />
    <PanGestureHandler onGestureEvent={eventHandler}>
      <Animated.View style={[animatedStyle, styles.ball]} />
    </PanGestureHandler>
  </View>
</Animated.View>


Like with TapGestureHandler, an event handler to pass to our PanGestureHandler 
component needs to be defined.

const x = useSharedValue(0);

const eventHandler = useAnimatedGestureHandler({
  onStart: (event, ctx) => {
    pressed.value = true;
    ctx.startX = x.value;
  },
  onActive: (event, ctx) => {
    x.value = ctx.startX + event.translationX;
  },
  onEnd: (event, ctx) => {
    pressed.value = false;
  },
});


Notice that in the above example onActive callback is defined which triggers as
long as a finger is moved across the screen. Context is also used which is an
object that is shared between all the callbacks. It can be looked at like it's a
"temporary state". Lastly, animated style is defined:

const animatedStyle = useAnimatedStyle(() => {
  return {
    backgroundColor: pressed.value ? "red" : "skyblue",
    transform: [
      { translateX: x.value },
      { scale: withTiming(pressed.value ? 1.5 : 1) },
    ],
  };
});


Final result:

PanGestureHandler exampleShowcase
I would recommend checking out William Candillon's youtube profile
[https://www.youtube.com/channel/UC806fwFWpiLQV5y-qifzHnA] which is a great
learning resource and full of examples. Here are some animations that I managed
to make with Reanimated following his tutorials and other various blog posts:

Example animationExample animationThank you for taking the time to read this
post. Feel free to share your thoughts about this topic and drop us an email at 
hello@prototyp.digital.

Happy animating! 😄

AuthorMatej Mijić

Start a Project