Limits of OnPush change detection when mutating @Input objects in Angular

Answer

The recommended way to have an OnPush child reflect mutations of an @Input object is to either create a new immutable reference (e.g., spread the object) or manually schedule change detection for that child using ChangeDetectorRef.markForCheck() (or detectChanges()) inside the child component.

Explanation vs. Confirmed Facts

Likely explanation

OnPush only runs change detection when the @Input reference changes or an internal Angular event (click, promise, etc.) occurs. Mutating properties or array elements in place does not change the reference, so the view stays stale.

Confirmed facts

• Angular’s change detection schedule is driven by zones; markForCheck() puts the component on the check list for the next run without bypassing OnPush semantics.
• Calling detectChanges() runs detection immediately on the component and its descendants, also respecting OnPush.
• There is no built‑in deep‑watching mechanism for @Input under OnPush; developers must use immutable updates, ngDoCheck with custom equality, or Observable inputs with the async pipe.

Steps for this case

1. Inject ChangeDetectorRef into the OnPush child component.
2. In the setter for the @Input (or in ngOnChanges) call this.cdRef.markForCheck();
3. If you prefer immutable updates, in the parent replace the object with a new copy, e.g., this.inputObj = {...this.inputObj};

Missing diagnostic detail

If the mutation occurs outside Angular’s zone (e.g., via a native setTimeout or third‑party library), you may need to wrap the markForCheck() call in NgZone.run(() => ...) or use Promise.resolve().then(() => this.cdRef.markForCheck());. Let me know whether the mutation is triggered inside an Angular event handler or outside the zone so I can confirm if the extra zone step is required.