# Механизм ChangeDetection

 В Angular механизм отслеживания изменений (англ. Change Detection) отвечает за своевременное отображение в [шаблоне](https://webdraftt.com/tutorial/angular-templates) данных при их изменении и обычно запускается при возникновении [событий](https://webdraftt.com/tutorial/js/events-handling), выполнении HTTP-запросов или вызове функции [setTimeout()](https://webdraftt.com/tutorial/js/timers#timeout) или [setInterval()](https://webdraftt.com/tutorial/js/timers#interval).

#### В случае с событиями, Angular расширяет стандартный метод addEventListener(), добавляя после вызова обработчика события вызов отслеживания изменений

Ключевая роль в отслеживании изменений у библиотеки **zone.js**, которая разделяет все Angular приложение на секторы, каждый из которых запоминает контекст асинхронного выполнения. Такой подход позволяет запускать отслеживание изменений только в месте выполнения асинхронной операции, а не во всем приложении.

####  Запуск механизма Change Detection в родительском [компоненте](https://webdraftt.com/tutorial/angular-components) автоматически инициирует запуск механизма во всех дочерних компонентах.

### ChangeDetectionStrategy

Механизм отслеживания изменений может работать согласно одной из двух предопределенных стратегий:

* Default - запускается при любом действии пользователя или изменения состояния компонента;
* OnPush - запускается в момент вызова стадии жизненного цикла компонента [OnChanges](https://webdraftt.com/tutorial/component-lifecycle) и при любом изменении значения используемых в шаблоне объектов [Observable](https://webdraftt.com/tutorial/rxjs/observable).

Стратегия задается в свойстве changeDetection объекта конфигурации декоратора @Component() и указывается для каждого компонента отдельно. Если параметр не указан явно - используется стратегия Default.

Стратегия задается с помощью перечисления ChangeDetectionStrategy.

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

    @Component({
      selector: 'book-item',
      template: `<h1>{{book}}</h1>`,
      changeDetection: ChangeDetectionStrategy.OnPush
    })
    export class BookItemComponent implements DoCheck{
    
      @Input() book: string = null;
    
      ngDoCheck(){
        console.log('Change Detection');
      }
    }
```

В приведенном примере механизм Change Detection не будет вызван, например, при [клике мыши](https://webdraftt.com/tutorial/js/mouse-events#click), но будет запущен при изменении свойства book.

Стратегия OnPush используется для повышения эффективности работы приложения за счет снижения количества вызовов механизма отслеживания изменений.