# Fonctionnement de la Change Detection

Angular adopte une [Approche Déclarative](https://guide-angular.wishtack.io/angular/change-detection/les-approches-possibles) afin de maintenir en synchronisation le modèle et la vue.

## Change Detector

**Chaque composant dispose d'un "change detector"** qui comme son nom l'indique se charge de détecter les changements de modèle concernant la vue et de mettre à jour la vue en conséquence.

Le "Change Detector" est fortement couplé à la vue du composant associé. Cela lui permet d'**analyser la liste des expressions utilisées dans la vue** *(i.e.* [*Template Interpolation*](https://guide-angular.wishtack.io/angular/composants/template-interpolation) *ou* [*Property Binding*](https://guide-angular.wishtack.io/angular/composants/property-binding)*)* *en les comparant à la dernière valeur retournée par chacune d'elles*.

**Si la valeur** retournée par l'expression **change**, **la vue est mise à jour** en conséquence.

## Déclenchement de la "Change Detection"

Pour détecter les changements, Angular utilise la librairie [Zone.js](https://github.com/angular/zone.js) dont le rôle est d'encapsuler et d'intercepter tous les appels asynchrones *(e.g.* `setTimeout`*, event listeners etc...)*.

Avant le chargement d'Angular, Zone.js procède au [Monkey patching ](https://en.wikipedia.org/wiki/Monkey_patch)des fonctions natives permettant d'inscrire des "callbacks" associées à des traitements asynchrones *(e.g. `setTimeout`)* afin de pouvoir détecter chaque "tick" et notifier Angular.

{% hint style="info" %}
Zone.js est également utilisé pour reconstruire des "callstacks" d'appels asynchrones.
{% endhint %}

## Fonctionnement de la Change Detection

### 1. Déclenchement de la "change detection"

A la **fin de chaque "tick"** *(détecté grâce à Zone.JS)*, Angular déclenche la **"Change Detection" du "Root Component"**.

### 2. **"Change Detection" de chaque composant**

Le **"Change Detector"** du composant **compare les anciennes et les nouvelles valeurs** de chaque **expression** utilisée dans les **bindings** *(*[*Template Interpolation*](https://guide-angular.wishtack.io/angular/composants/template-interpolation) *ou* [*Property Binding*](https://guide-angular.wishtack.io/angular/composants/property-binding)*)*.

### 3. **Mise à jour de la vue si nécessaire**

En cas de changement, l'élément concerné est mis à jour dans la vue.

### 4. **Vérification récursive**

Le "Change Detector" de chaque "child component" est ensuite déclenché et l'étape 2 est reproduite pour chaque composant de façon récursive.

### 5. Double check

***\[Uniquement en mode développement]*** Angular relance l'intégralité de la "Change Detection" pour s'assurer que les valeurs retournées par les expressions ne changent pas.\
Cela permet de détecter les problèmes de conception ou d'implémentation tels que le changement du modèle par effet de bord ou les expressions dont le résultat est aléatoire.

![Angular Change Detection](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LC_QSng2Le5977buoYz%2F-LBXv0TCGziWI7PfaWf3%2Fangular-change-detection.gif?generation=1526415106526270\&alt=media)

{% tabs %}
{% tab title="1" %}
![](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LOU3XFEqoptQTgE9aST%2F-LOU4mFt-Ue5xtbIP4bQ%2F1.jpg?alt=media\&token=8ef8ace4-a08d-4859-8487-9c99b4b18c88)
{% endtab %}

{% tab title="2" %}
![](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LOU3XFEqoptQTgE9aST%2F-LOU4sC7Z_qVlI0JeCXI%2F2.jpg?alt=media\&token=0431cdf0-9a50-4c6d-b405-f979885d7809)
{% endtab %}

{% tab title="3" %}
![](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LOU3XFEqoptQTgE9aST%2F-LOU4vJ3leaK37oV-lru%2F3.jpg?alt=media\&token=19066d7e-db49-4ff6-a808-477f27be3be2)
{% endtab %}

{% tab title="4" %}
![](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LOU3XFEqoptQTgE9aST%2F-LOU4xyi5vncho4pdsFY%2F4.jpg?alt=media\&token=e5a3fbb8-59f1-4b28-814c-c075fc99c90e)
{% endtab %}

{% tab title="5" %}
![](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LOU3XFEqoptQTgE9aST%2F-LOU5-n8nAPjIdlWTmGs%2F5.jpg?alt=media\&token=8837ae49-7bd5-448f-a07e-31e0e3a0d3e9)
{% endtab %}

{% tab title="6" %}
![](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LOU59JOT15sifFj6aoo%2F-LOU5CSG3ILDHvyBXNlV%2F6.jpg?alt=media\&token=df258808-8894-4960-bb0e-d14d84f5bd63)
{% endtab %}

{% tab title="7" %}
![](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LOU59JOT15sifFj6aoo%2F-LOU5HNTCnc2hsnaIip6%2F7.jpg?alt=media\&token=1efda2c2-23cf-40fd-86d8-01349670516d)
{% endtab %}

{% tab title="8" %}
![](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LOU59JOT15sifFj6aoo%2F-LOU5LprdaGPpXGZ_b-n%2F8.jpg?alt=media\&token=1eaf90aa-bf37-49d6-8e8c-2bfcefcb0841)
{% endtab %}

{% tab title="9" %}
![](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LOU59JOT15sifFj6aoo%2F-LOU5Ocq-rsPBNLLMDLU%2F9.jpg?alt=media\&token=7eb8655d-91e6-44f6-9d6b-121c210b5dec)
{% endtab %}

{% tab title="10" %}
![](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LOU59JOT15sifFj6aoo%2F-LOU5RrTssIxY0YML6ND%2F10.jpg?alt=media\&token=f54b9142-0c4a-4197-b65e-fd5a9c6e93b9)
{% endtab %}

{% tab title="11" %}
![](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LOU59JOT15sifFj6aoo%2F-LOU5UAirGzmRa1hrbM2%2F11.jpg?alt=media\&token=2391a82a-5fea-4e43-b569-eaa898ef541f)
{% endtab %}

{% tab title="12" %}
![](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LOU59JOT15sifFj6aoo%2F-LOU5WjPJ4t0reJrd-BY%2F12.jpg?alt=media\&token=30c25004-1276-47ae-bd69-48f59387cd31)
{% endtab %}

{% tab title="13" %}
![](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LOU59JOT15sifFj6aoo%2F-LOU5_UaEsWJgUoqvton%2F13.jpg?alt=media\&token=681219d0-550e-4e94-b908-66483aed6b7a)
{% endtab %}

{% tab title="14" %}
![](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LOU59JOT15sifFj6aoo%2F-LOU5cEPDPq_Wv_52Etj%2F14.jpg?alt=media\&token=aa8ed7b9-0bae-440c-ac0e-26f4f2a41a5d)
{% endtab %}

{% tab title="15" %}
![](https://4009647861-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LOU59JOT15sifFj6aoo%2F-LOU5fRYhCXCMT2mBEbZ%2F15.jpg?alt=media\&token=2cd9e717-f60b-43cb-a383-db5200cd2255)
{% endtab %}
{% endtabs %}