fix(core): InputBinding marks component a dirty. (#62613)

aparzi · AndrewKushnir · commit a81f0faa1a72 · 2025-07-14T15:46:29.000-07:00
This fix ensures that CD runs on OnPush component when an input binding is set. PR Close #62613
diff --git a/packages/core/src/render3/dynamic_bindings.ts b/packages/core/src/render3/dynamic_bindings.ts
@@ -16,6 +16,9 @@ import {TVIEW} from './interfaces/view';
 import {getCurrentTNode, getLView, getSelectedTNode, nextBindingIndex} from './state';
 import {stringifyForError} from './util/stringify_utils';
 import {createOutputListener} from './view/directive_outputs';
+import {markViewDirty} from './instructions/mark_view_dirty';
+import {getComponentLViewByIndex} from './util/view_utils';
+import {NotificationSource} from '../change_detection/scheduling/zoneless_scheduling';
 
 /** Symbol used to store and retrieve metadata about a binding. */
 export const BINDING: unique symbol = /* @__PURE__ */ Symbol('BINDING');
@@ -70,6 +73,9 @@ function inputBindingUpdate(targetDirectiveIdx: number, publicName: string, valu
     const tView = lView[TVIEW];
     const tNode = getSelectedTNode();
 
+    const componentLView = getComponentLViewByIndex(tNode.index, lView);
+    markViewDirty(componentLView, NotificationSource.SetInput);
+
     // TODO(pk): don't check on each and every binding, just assert in dev mode
     const targetDef = tView.directiveRegistry![targetDirectiveIdx];
     if (ngDevMode && !targetDef) {
diff --git a/packages/core/test/acceptance/create_component_spec.ts b/packages/core/test/acceptance/create_component_spec.ts
@@ -36,6 +36,7 @@ import {
 } from '../../src/core';
 import {stringifyForError} from '../../src/render3/util/stringify_utils';
 import {TestBed} from '../../testing';
+import {ChangeDetectionStrategy} from '@angular/compiler';
 
 describe('createComponent', () => {
   it('should create an instance of a standalone component', () => {
@@ -1111,6 +1112,34 @@ describe('createComponent', () => {
         /Cannot call `setInput` on a component that is using the `inputBinding` or `twoWayBinding` functions/,
       );
     });
+
+    it('should update view of component set with the onPush strategy after input change', () => {
+      @Component({
+        standalone: true,
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        template: 'Value: {{ value }}',
+      })
+      class DisplayOnPushComponent {
+        @Input() value: number = -1;
+      }
+
+      const hostElement = document.createElement('div');
+      const environmentInjector = TestBed.inject(EnvironmentInjector);
+      const valueSignal = signal(10);
+
+      const componentRef = createComponent(DisplayOnPushComponent, {
+        hostElement,
+        environmentInjector,
+        bindings: [inputBinding('value', valueSignal)],
+      });
+
+      componentRef.changeDetectorRef.detectChanges();
+      expect(hostElement.textContent).toBe('Value: 10');
+
+      valueSignal.set(20);
+      componentRef.changeDetectorRef.detectChanges();
+      expect(hostElement.textContent).toBe('Value: 20');
+    });
   });
 
   describe('root component outputs', () => {
