<commit_before>---
layout:     post
title:      "Angular 2 Change Detection Explained"

relatedLinks:
  -
    title: "Angular 2 Change Detection Explained - Slides"
    url: "http://pascalprecht.github.io/slides/angular-2-change-detection-explained/#/"
  -
    title: "Change Detection in Angular 2"
    url: "http://victorsavkin.com/post/110170125256/change-detection-in-angular-2"
  -
    title: "Angular, Immutability and Encapsulation"
    url: "http://victorsavkin.com/post/133936129316/angular-immutability-and-encapsulation"
  -
    title: "Change and its Detection in JavaScript frameworks"
    url: "http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html"
  -
    title: "Taking advantage of Observables in Angular 2"
    url: "http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html"

date: 2016-02-22

summary: "At NG-NL 2016 I gave a talk about Angular 2's Change Detection and how it makes our apps fast and responsive. This article is a write-up of that talk and discusses how change detection works and how we can configure it to be even faster."

categories:
  - angular
tags:
  - angular2

topic: changedetection

author: pascal_precht
---

[NG-NL](http://ng-nl.org) has happened and it was awesome! I had the honour of giving a talk about change detection in Angular 2 and it seemed to be a huge success as attendees liked it a lot. With this article, we'd like to transform the talk into a written version, so everyone can read about how Angular's change detection works and how to make it faster for our use cases. If you're interested in the talk, you can view the [slides here](http://pascalprecht.github.io/slides/angular-2-change-detection-explained/#/) and as soon as the talk recording is up, you'll find it here as well.

Now let's take a look at this beast.

## What's Change Detection anyways?

The basic task of change detection is to take the internal state of a program and make it somehow visible to the user interface. This state can be any kind of objects, arrays, primitives, ... just any kind of JavaScript data structures.

This state might end up as paragraphs, forms, links or buttons in the user interface and specifically on the web, it's the Document Object Model (DOM). So basically we take data structures as input and generate DOM output to display it to the user. We call this process rendering.

<img style="background: #0c4eb2; padding: 0 1em;" src="/images/cd-4.svg">

However, it gets trickier when a change happens at runtime. Some time later when the DOM has already been rendered. How do we figure out what has changed in our model, and where do we need to update the DOM? Accessing the DOM tree is always expensive, so not only do we need to find out where updates are needed, but we also want to keep that access as tiny as possible.

This can be tackled in many different ways. One way, for instance, is simply making a http request and re-rendering the whole page. Another approach is the concept of diffing the DOM of the new state with the previous state and only render the difference, which is what ReactJS is doing with **Virtual DOM**.

[Tero](http://twitter.com/tero) has written an awesome article on [Change and its detection in JavaScript frameworks](http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html), we recommend checking it out if you're more interested in how different frameworks solve this issue. In this article we're going to focus on Angular 2.

So basically the goal of change detection is always projecting data and its change.

## What causes change?

Now that we know what change detection is all about, we might wonder, when exactly can such a change happen? When does Angular know that it has to update the view? Well, let's take a look at the following code:

{% highlight javascript %}
{% raw %}
@Component({
  template: `
    <h1>{{firstname}} {{lastname}}</h1>
    <button (click)="changeName()">Change name</button>
  `
})<commit_msg>fixes link to Tero's twitter<commit_after>---
layout:     post
title:      "Angular 2 Change Detection Explained"

relatedLinks:
  -
    title: "Angular 2 Change Detection Explained - Slides"
    url: "http://pascalprecht.github.io/slides/angular-2-change-detection-explained/#/"
  -
    title: "Change Detection in Angular 2"
    url: "http://victorsavkin.com/post/110170125256/change-detection-in-angular-2"
  -
    title: "Angular, Immutability and Encapsulation"
    url: "http://victorsavkin.com/post/133936129316/angular-immutability-and-encapsulation"
  -
    title: "Change and its Detection in JavaScript frameworks"
    url: "http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html"
  -
    title: "Taking advantage of Observables in Angular 2"
    url: "http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html"

date: 2016-02-22

summary: "At NG-NL 2016 I gave a talk about Angular 2's Change Detection and how it makes our apps fast and responsive. This article is a write-up of that talk and discusses how change detection works and how we can configure it to be even faster."

categories:
  - angular
tags:
  - angular2

topic: changedetection

author: pascal_precht
---

[NG-NL](http://ng-nl.org) has happened and it was awesome! I had the honour of giving a talk about change detection in Angular 2 and it seemed to be a huge success as attendees liked it a lot. With this article, we'd like to transform the talk into a written version, so everyone can read about how Angular's change detection works and how to make it faster for our use cases. If you're interested in the talk, you can view the [slides here](http://pascalprecht.github.io/slides/angular-2-change-detection-explained/#/) and as soon as the talk recording is up, you'll find it here as well.

Now let's take a look at this beast.

## What's Change Detection anyways?

The basic task of change detection is to take the internal state of a program and make it somehow visible to the user interface. This state can be any kind of objects, arrays, primitives, ... just any kind of JavaScript data structures.

This state might end up as paragraphs, forms, links or buttons in the user interface and specifically on the web, it's the Document Object Model (DOM). So basically we take data structures as input and generate DOM output to display it to the user. We call this process rendering.

<img style="background: #0c4eb2; padding: 0 1em;" src="/images/cd-4.svg">

However, it gets trickier when a change happens at runtime. Some time later when the DOM has already been rendered. How do we figure out what has changed in our model, and where do we need to update the DOM? Accessing the DOM tree is always expensive, so not only do we need to find out where updates are needed, but we also want to keep that access as tiny as possible.

This can be tackled in many different ways. One way, for instance, is simply making a http request and re-rendering the whole page. Another approach is the concept of diffing the DOM of the new state with the previous state and only render the difference, which is what ReactJS is doing with **Virtual DOM**.

[Tero](http://twitter.com/teropa) has written an awesome article on [Change and its detection in JavaScript frameworks](http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html), we recommend checking it out if you're more interested in how different frameworks solve this issue. In this article we're going to focus on Angular 2.

So basically the goal of change detection is always projecting data and its change.

## What causes change?

Now that we know what change detection is all about, we might wonder, when exactly can such a change happen? When does Angular know that it has to update the view? Well, let's take a look at the following code:

{% highlight javascript %}
{% raw %}
@Component({
  template: `
    <h1>{{firstname}} {{lastname}}</h1>
    <button (click)="changeName()">Change name</button>
  `
})
{'fraction_non_alphanumeric': 0.07924341698603041, 'fraction_numerical': 0.019779948077636295, 'mean_word_length': 4.015499070055797, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3629628', 'n_tokens_mistral': 2369, 'n_tokens_neox': 2159, 'n_words': 1098}