Change detection is fired on each event loop chance (events, http requets, timers, ...).
Components are allways explored form the root to the leafs of the component tree.
By default, A2 is conservative and explores the complete tree and evaluates all the expressions in each component or directive template. Then compares the output of each expression to its previous output. If the result of an expression has changed, A2 updates the DOM accordingly.
This is the default CD strategy and is called ChangeDetectionStrategy.CheckAllways.
In order to reduce the performance impact the CD strategy of components can be set to ChangeDetectionStrategy.OnPush.
OnPush means that the change detector will only run on a component or directive if one of the following occurs:
- An input property has changed to a new value (new primitive value or new object reference).
- An event handler fired in the component or directive (???).
- You manually tell the change detector to look for changes.
- The change detector of a child component or directive runs.
OnPush should be implemented starting on leafs, otherwise child components or directives on them with CheckAllways strategy won't be allways executed.
- Presentation: http://pascalprecht.github.io/slides/angular-2-change-detection-explained/
- Immutable data and ngFor: http://www.jvandemo.com/how-i-optimized-minesweeper-using-angular-2-and-immutable-js-to-make-it-insanely-fast/