Using OnPush change detection to prune component subtrees

In today’s world of modern web applications, performance is one of the key factors for a great User Experience (UX) and, ultimately, conversions for a business. In this recipe, the first recipe of this chapter, we’re going to discuss the fundamental or the most basic optimization you can do with your components wherever it seems appropriate, which is by using the OnPush change detection strategy. The app we’re working with has some performance issues, particularly with the UserCardComponent class. This is because it uses a getter function, randomColor, to generate a random color for its background. Behind the scenes, that function uses a factorial function to add more processing time. But that is just to demonstrate a component that can cause the UI to hang if there is some complex calculation happening, along with multiple change detections being triggered.

Getting ready

The app that we are going...