Chapter 9. Change detection and component lifecycle
This chapter covers
- How Angular knows that a UI update is needed
- Reviewing the milestones in the life of a component
- Writing code in component lifecycle hooks
All the apps you’ve developed so far have been properly updating the UI when the user or program updates the properties of your components. How does Angular know when to update the UI? In this chapter, we’ll discuss the change detection (CD) mechanism that monitors the asynchronous events of your app and decides whether the UI should be updated or not.
We’ll also discuss the lifecycle of an Angular component and the callback method hooks you can use to provide application-specific code that intercepts important events during a component’s creation, lifespan, and destruction.
Finally, we’ll continue working on ngAuction. This time, you’ll add the view that displays product details.
As the user works with your app, things change and the values of component properties (the model) get modified. Most of the changes happen asynchronously—for example, the user clicks a button, data is received from a server, an observable starts emitting values, a script invokes the setTimeout() function, and so on. Angular needs to know when the result of an asynchronous operation becomes available, to update the UI accordingly.