https://github.com/jdegand/default-onpush
Angular Challenges #34 Default vs OnPush
https://github.com/jdegand/default-onpush
angular angular-challenges angular-material change-detection tailwind
Last synced: 6 months ago
JSON representation
Angular Challenges #34 Default vs OnPush
- Host: GitHub
- URL: https://github.com/jdegand/default-onpush
- Owner: jdegand
- Created: 2023-09-13T00:25:53.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-31T03:46:32.000Z (almost 2 years ago)
- Last Synced: 2025-03-15T20:13:19.171Z (11 months ago)
- Topics: angular, angular-challenges, angular-material, change-detection, tailwind
- Language: TypeScript
- Homepage:
- Size: 123 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Default Onpush
[Angular Challenges](https://github.com/tomalaforge/angular-challenges) #34 Default vs OnPush
## Built With
- [Angular](https://angular.io)
- [Angular CLI](https://github.com/angular/angular-cli) version 16.2.0.
## Directions
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 color enlightment to each component and each row in our application. However, in real-world scenarios, you will not have such visualization. This is where the [Angular DevTools profiler](https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh) comes to the rescue.
### Statement
The goal of this challenge is to improve the clustering of change detection within the application.
## Thoughts
- Adding ChangeDetection.onPush seemed to help limit MatFormField from re-rendering but PersonListComponent was unaffected.
- PersonListComponent is the one changing the most.
- I took the gap after `` in app.component as a hint as to where an input component should go.
```html
```
## Useful Resources
- [byby](https://byby.dev/at-rule-tailwind) - @tailwind workarounds