Which @angular/* package(s) are relevant/related to the feature request?

core

Description

Currently, Angular provides a way to create models for two-way data binding using [(ngModel)] with new signal method model(). However, when using writableSignal from another service or library (such as a signal store or functions like linkedQueryParams or injectLocalStorage from ngxtension), there is no direct way to bind these signals to component inputs/outputs without manually synchronizing the model and the signal.

The proposed modelFrom(writableSignal) function would allow developers to create a model from a writableSignal, enabling seamless two-way data binding between the signal and component inputs/outputs. This would be analogous to the existing outputFromObservable function but for two-way binding.

Proposed solution

Introduce a new function modelFrom(writableSignal) in @angular/core that takes a writableSignal and returns a model that can be used with [(ngModel)] for two-way data binding. This function would handle the synchronization between the signal and the model, ensuring that updates to either are reflected in both.

Example Usage

import { modelFrom, signal  } from '@angular/core';

@Component(...)
class MyComponent  {
   mySignalStore = inject(MySignalStore);

   myModel = modelFrom(mySignalStore);
}

// In a component template
<my-compoent [(myModel)]="value">

Alternatives considered

Manual Synchronization: Developers can manually synchronize the model and the signal by subscribing to changes in both and updating the other accordingly. This approach is error-prone and requires boilerplate code.

The proposed modelFrom(writableSignal) function provides a clean, built-in solution that aligns with Angular's existing patterns and reduces boilerplate code.