Angular 2 Change Detection: ‘Seeing’ it in Action

The Angular 2 change detection system is somewhat of a black box: you update some variables in the model, and the components update automatically. Thoughtram, Victor Savkin, and other websites have written some excellent posts explaining change detection (which we reference in this post). Often, these posts present a series of graphs and diagrams that illustrate how the detect-and-update machinery works theoretically. However, in the spirit of “programming by poking,” we will attempt to match some of the theories with observable behavior using an Angular 2 demo app, and the code for the demo can be found in this plunker or this GitHub repo.
About the Demo
Surface Level Functionality
The above app renders a binary expression tree for an algebraic expression of the form: