feat(core): add support for two-way bindings on dynamically-created components (#60342)

crisbeto · pkozlowski-opensource · commit b154fb391142 · 2025-03-17T14:29:52.000+01:00
Builds on the changes from #60137 to add support for two-way bindings on dynamically-created components. Example usage: ```typescript import {createComponent, signal, twoWayBinding} from '@angular/core'; const value = signal(''); createComponent(MyCheckbox, { bindings: [ twoWayBinding('value', value), ], }); ``` In the example above the value of `MyCheckbox` and the `value` signal will be kept in sync. PR Close #60342
diff --git a/goldens/public-api/core/index.api.md b/goldens/public-api/core/index.api.md
@@ -1838,6 +1838,9 @@ export const TRANSLATIONS: InjectionToken<string>;
 // @public
 export const TRANSLATIONS_FORMAT: InjectionToken<string>;
 
+// @public
+export function twoWayBinding(publicName: string, value: WritableSignal<unknown>): Binding;
+
 // @public
 export const Type: FunctionConstructor;
 
diff --git a/packages/core/src/core.ts b/packages/core/src/core.ts
@@ -112,7 +112,7 @@ export {
   afterNextRender,
   ɵFirstAvailable,
 } from './render3/after_render/hooks';
-export {inputBinding, outputBinding} from './render3/dynamic_bindings';
+export {inputBinding, outputBinding, twoWayBinding} from './render3/dynamic_bindings';
 export {ApplicationConfig, mergeApplicationConfig} from './application/application_config';
 export {makeStateKey, StateKey, TransferState} from './transfer_state';
 export {booleanAttribute, numberAttribute} from './util/coercion';
diff --git a/packages/core/src/render3/component_ref.ts b/packages/core/src/render3/component_ref.ts
@@ -458,7 +458,8 @@ function getRootTViewTemplate(
 }
 
 function isInputBinding(binding: Binding): boolean {
-  return binding[BINDING].kind === 'input';
+  const kind = binding[BINDING].kind;
+  return kind === 'input' || kind === 'twoWay';
 }
 
 /**
@@ -498,7 +499,7 @@ export class ComponentRef<T> extends AbstractComponentRef<T> {
     if (this._hasInputBindings && ngDevMode) {
       throw new RuntimeError(
         RuntimeErrorCode.INVALID_SET_INPUT_CALL,
-        'Cannot call `setInput` on a component that is using the `inputBinding` function.',
+        'Cannot call `setInput` on a component that is using the `inputBinding` or `twoWayBinding` functions.',
       );
     }
 
diff --git a/packages/core/src/render3/dynamic_bindings.ts b/packages/core/src/render3/dynamic_bindings.ts
@@ -6,8 +6,10 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {WritableSignal} from '../core_reactivity_export_internal';
 import {RuntimeError, RuntimeErrorCode} from '../errors';
-import {Type} from '../interface/type';
+import {Type, Writable} from '../interface/type';
+import {assertNotDefined} from '../util/assert';
 import {bindingUpdated} from './bindings';
 import {listenToDirectiveOutput, wrapListener} from './instructions/listener';
 import {setDirectiveInput, storePropertyBindingMetadata} from './instructions/shared';
@@ -174,3 +176,47 @@ export function outputBinding<T>(eventName: string, listener: (event: T) => unkn
 
   return binding;
 }
+
+/**
+ * Creates a two-way binding.
+ * @param eventName Public name of the two-way compatible input.
+ * @param value Writable signal from which to get the current value and to which to write new
+ * values.
+ *
+ * ### Usage example
+ * In this example we create an instance of the `MyCheckbox` component and bind to its `value`
+ * input using a two-way binding.
+ *
+ * ```
+ * const checkboxValue = signal('');
+ *
+ * createComponent(MyCheckbox, {
+ *   bindings: [
+ *    twoWayBinding('value', checkboxValue),
+ *   ],
+ * });
+ * ```
+ */
+export function twoWayBinding(publicName: string, value: WritableSignal<unknown>): Binding {
+  const input = inputBinding(publicName, value);
+  const output = outputBinding(publicName + 'Change', (eventValue) => value.set(eventValue));
+
+  // We take advantage of inputs only having a `create` block and outputs only having an `update`
+  // block by passing them through directly instead of creating dedicated functions here. This
+  // assumption can break down if one of them starts targeting both blocks. These assertions
+  // are here to help us catch it if something changes in the future.
+  ngDevMode && assertNotDefined(input.create, 'Unexpected `create` callback in inputBinding');
+  ngDevMode && assertNotDefined(output.update, 'Unexpected `update` callback in outputBinding');
+
+  return {
+    [BINDING]: {
+      kind: 'twoWay',
+      requiredVars: input[BINDING].requiredVars + output[BINDING].requiredVars,
+    },
+    set target(target: unknown) {
+      (input as Writable<Binding>).target = (output as Writable<Binding>).target = target;
+    },
+    create: output.create,
+    update: input.update,
+  };
+}
diff --git a/packages/core/test/acceptance/create_component_spec.ts b/packages/core/test/acceptance/create_component_spec.ts

Original file line number	Diff line number	Diff line change
`@@ -458,7 +458,8 @@ function getRootTViewTemplate(`
`458`	`458`	`}`
`459`	`459`
`460`	`460`	`function isInputBinding(binding: Binding): boolean {`
`461`		`- return binding[BINDING].kind === 'input';`
	`461`	`+ const kind = binding[BINDING].kind;`
	`462`	`+ return kind === 'input' \|\| kind === 'twoWay';`
`462`	`463`	`}`
`463`	`464`
`464`	`465`	`/**`
`@@ -498,7 +499,7 @@ export class ComponentRef<T> extends AbstractComponentRef<T> {`
`498`	`499`	`if (this._hasInputBindings && ngDevMode) {`
`499`	`500`	`throw new RuntimeError(`
`500`	`501`	`RuntimeErrorCode.INVALID_SET_INPUT_CALL,`
`501`		- 'Cannot call `setInput` on a component that is using the `inputBinding` function.',
	`502`	+ 'Cannot call `setInput` on a component that is using the `inputBinding` or `twoWayBinding` functions.',
`502`	`503`	`);`
`503`	`504`	`}`
`504`	`505`