An Interest In:
Web News this Week
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
Angular - Use ChangeDetectionStrategy.OnPush
Angular gives us an option to choose the ChangeDetectionStrategy
of a component. By default, the value is Default
. It's recommended to change that to OnPush
strategy to maximize the performance.
By default, Angular run its change detection cycle on all the components whenever there occurs some changes, like a simple click event or when we receive data from ajax calls. Running change detection cycle on every such events are costly and may affect the performance.
We can minimize these checks by setting our component's changeDetection
to ChangeDetectionStrategy.OnPush
. This will tell Angular to run change detection cycle only when:
- The
Input
reference changes. - Some event occurs in the component or any of the children.
@Component({ selector: 'app-selector', ... changeDetection: ChangeDetectionStrategy.OnPush});
Note: Make use of detectChanges()
or markForCheck()
functions of ChangeDetectorRef
to explicitely run the change detection cycle if required.
Resources: A Comprehensive Guide to Angular onPush Change Detection Strategy.
Thanks to @fyodorio .
Original Link: https://dev.to/sandrocagara/angular-use-changedetectionstrategyonpush-4n0g
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To