[Solved] What is wrong with this Angular component code snippet that tries to avoid NgRx?export class ExampleComponent { state = { value: 0 }; increment() { this.state.value++; } }Increment{{ state.value }} | Angular

Angular - State Management

What is wrong with this Angular component code snippet that tries to avoid NgRx?

export class ExampleComponent {
  state = { value: 0 };
  increment() {
    this.state.value++;
  }
}

AIncrement method should not modify state

BDirectly mutating state object can cause change detection issues

Cstate should be a primitive, not an object

DMissing @Input decorator on state

Step-by-Step Solution

Solution:

Step 1: Understand Angular change detection
Angular detects changes by object reference, not deep mutation.
Step 2: Identify mutation issue
Incrementing state.value mutates the object without changing reference, may not update view.
Final Answer:
Directly mutating state object can cause change detection issues -> Option B
Quick Check:
Mutate immutably to trigger Angular updates [OK]

Quick Trick: Avoid mutating objects directly; create new copies [OK]

Common Mistakes:

Master "State Management" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

What is wrong with this Angular component code snippet that tries to avoid NgRx?