javascript / intermediate
Snippet
OnPush Change Detection Strategy
The OnPush strategy reduces change detection overhead by checking the component only when an @Input property changes by reference. This prevents Angular from checking the component during every global change cycle.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
@Component({selector: 'app-user',template: '<div>{{ user.name }}</div>',changeDetection: ChangeDetectionStrategy.OnPush,standalone: true})export class UserComponent {@Input() user!: { name: string };}
angular
Breakdown
1
ChangeDetectionStrategy.OnPush
Configures the component to use the more efficient OnPush detection mechanism.
2
@Input() user!
Changes to the user object must be done by creating a new reference to trigger detection.