OnPush order row stays stale after a live update

What you’ll build / What this tests

This premium Angular debug scenario focuses on OnPush order row stays stale after a live update. Read the failure signals, choose the highest-signal debug order, and defend the fix plus regression guard.

Learning goals

• Why does the row stay stale?
• What would you check first? Put the best three at the top.
• Which changes belong in the real fix?
• What is the best guardrail for this bug?

Key decisions to discuss

• Separate symptom from root cause before touching code.
• Choose the smallest debug step that removes the most ambiguity.
• Prefer a durable fix over a UI-only patch.
• Define the regression guard you would add after the fix.

Evaluation rubric

• Strong answers prioritize evidence instead of guessing.
• Good debug order reduces search space quickly.
• The final fix should match the actual failure mode.
• A senior answer closes with a guardrail or test plan.

Constraints / Requirements

• Angular 17 admin table. Each row is an `OnPush` child component that receives `@Input() order`, and…
• The socket event arrives, but the row still shows the old status
• Sorting or filtering suddenly makes the right status appear
• The service mutates the existing order object in place

Current update path

@Component({
  selector: 'app-order-row',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `{{ order.status }}`
})
export class OrderRowComponent {
  @Input({ required: true }) order!: Order;
}

Common pitfalls

• Jumping to the fix before proving the root cause.
• Treating every symptom as equally important.
• Stopping at the first plausible explanation.
• Skipping the regression guard after the fix.

Related questions

• Cart badge and cart page drift out of syncFree