[Solved] Consider this Angular component:@Component({ selector: 'app-value', changeDetection: ChangeDetectionStrategy.... } }Why might the template not reflect the incremented value? | Angular

Angular - Change Detection

Consider this Angular component:

@Component({ selector: 'app-value', changeDetection: ChangeDetectionStrategy.OnPush }) export class ValueComponent { @Input() number = 0; increment() { this.number++; } }

Why might the template not reflect the incremented value?

ABecause OnPush disables all change detection

BBecause the input 'number' is mutated directly without changing its reference

CBecause @Input() properties cannot be changed inside the component

DBecause the increment method is not called in the template

Step-by-Step Solution

Solution:

Step 1: OnPush and Inputs
OnPush triggers detection when input references change.
Step 2: Analyze Mutation
Incrementing a primitive input directly does not change its reference.
Step 3: Result
Angular does not detect the change, so the view is not updated.
Final Answer:
Because the input 'number' is mutated directly without changing its reference -> Option B
Quick Check:
OnPush requires new input references to update [OK]

Quick Trick: OnPush needs new input references to detect changes [OK]

Common Mistakes:

MISTAKES

Believing OnPush disables all detection
Thinking inputs cannot be changed internally
Assuming method call alone triggers update

Master "Change Detection" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

Consider this Angular component:

Step 1: OnPush and Inputs

Step 2: Analyze Mutation

Step 3: Result

Final Answer:

Quick Check:

Want More Practice?