The order of execution of the change detectors - FadiZahhar/switchingtoangular2 GitHub Wiki

Now, let's briefly describe the order in which the change detectors are invoked in a given component tree. For this purpose, we will use the last implementation of the to-do application we have, but this time, we'll extract the logic to render the individual to-do items into a separate component called TodoItem. In the following figure, we can see the application's structure:

At the top level is the TodoApp component, which has two children: InputBox and TodoList. The TodoList component renders the individual to-do items in TodoItem components. The implementation details are not important for our purpose, so we are going to ignore them.

Now, we need to realize that there is an implicit dependency between the state of the parent component and its children. For instance, the state of the TodoList component depends completely on the to-do items that are located at its parent: the TodoApp component. There's a similar dependency between TodoItem and TodoList, since the TodoList component passes the individual to-do items to a separate instance of the TodoItem component.

Because of our last observation, the order of execution of the change detectors attached to the individual components is like the one shown on the preceding figure. Once the change detection mechanism run, initially it will perform a check over the TodoApp component. Right after this, the InputBox component will be checked for changes, followed by the TodoList component. In the end, Angular will invoke the change detector of the TodoItem component. You can trace the order of execution in the ch4/ts/change_detection_strategy_ order/app.ts example, where each individual component logs a message once its ngDoCheck method is invoked. Note that only the components have an instance of a change detector attached to them; directives use the change detector of their parent component.