3.1 KiB
OnPush to optimize Change Detection
Author: Thomas Laforge
Information
In this series of challenges, you will learn how to optimize and enhance the performance of your Angular Application.
The first step is to download the Angular DevTools Chrome extention if you haven't already done so. This extension allows you to profile your application and detect performance issues.
In this challenge, we will explore the differences and impacts of using ChangeDetectionStrategy.Default versus ChangeDetectionStrategy.OnPush. To provide a clearer demonstration, I have added counters to each component and each row in our application. However, in real-world scenarios, you may not have such counters. This is where the Angular DevTool profiler comes to the rescue.
Start by serving this application by running: npx nx serve performance-default-onpush inside your terminal. Then open Chrome DevTool by pressing F12 and switch to the Angular Tab. From there you can select the Profiler tab as shown below.
Start profiling your application and type some letters inside the input field. You will notice that each number is increasing and the profiler will show you a lot of change detection cycle.
If you click on one of the bars (indicated by the yellow arrow on the picture below), you can see that PersonListComponent, RandomComponent and all the MatListItem are impacted by the change detection cycle, even when we only interact with the input field.
Statement
The goal of this challenge is to improve the clustering of change detection within the application.
Hints:
Hint 1
Use ChangeDetectionStrategy.OnPush but this will not be enough.
Hint 2
Create smaller components to better separate the input field from the list.
Submitting your work
- Fork the project
- clone it
- npm ci
npx nx serve performance-default-onpush- ...work on it
- Commit your work
- Submit a PR with a title beginning with Answer:34 that I will review and other dev can review.
You can ask any question on 