Understanding Angular change detection

For small applications, performance isn’t usually a bottleneck. Still, when applications grow and you start to add and compose more components, your application can become slow, impairing the user experience and decreasing user retention. One of the reasons your applications become slow is that Angular will check more and more components for changes if you develop without taking measures to help Angular perform better change detection. So, to build performant Angular applications, you need to understand how the change detection mechanism works so you can reduce the number of components the framework has to check for changes and re-render in the browser.

To better understand the problem, you must first understand how Angular performs change detection and where the problems start.

Let’s say you have a simple component with a title property and a changeTitle() function, like so:

title = 'Some title';
changeTitle(newTitle...