angular · crisbeto · Mar 12, 2025 · devversion · Mar 17, 2025 · devversion
diff --git a/goldens/public-api/core/index.api.md b/goldens/public-api/core/index.api.md
@@ -1835,6 +1835,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,
+  };
+}