Angular v17.2.0 introduces a new api to allow two-way binding with Signal Inputs: Model Inputs.
Before proceeding, I kindly suggest you to read my previous article “Angular Signal Inputs: road to Signal Components”, in which I discussed about Signal Inputs and how they work.
This article is strictly connected to the previous, and is meant to fulfill the open point about the two-way binding with Signal Inputs.
Now that Model Inputs are available it’s time to dive deeper into them.
⚠️ ALERT: new Model Inputs are still in developer preview ⚠️
How to create a Model Input
Just like Signal Inputs, Model Inputs are meant to replace classic inputs created with the @Input( ) decorator, exposing the input value as a Signal.
To create a Model Input you just need to use the model( ) function provided by @angular/core package:
import { Component, model, ModelSignal } from '@angular/core';
@Component({ ... })
export class MyComponent {
myProp: ModelSignal<string | undefined> = model<string>();
}
Code language: TypeScript (typescript)Your input will be typed as ModelSignal, a special type of Signal that Angular internally updates whenever a new value is bound.
The update( ) function
Two-way binding allows both parent and child components to update the value of a bonded input and to share then the same identical value.
To enable the update from the child component, ModelSignal api exposes a dedicated update( ) function to update an input based on the current value:
updateProp(): void {
this.myProp.update((current) => current + ' - Updated!!!');
}
Code language: TypeScript (typescript)The two-way binding
Using Angular’s two-way binding syntax when binding a value from the parent component to the child component, the ModelSignal update from the child component will therefore go back up to the parent component:
<my-component
[(myProp)]="parentProp"
(myPropChange)="onPropChangeMethod($event)"
></my-component>
Code language: HTML, XML (xml)Both parent and child component will have the property value synced.
The parent component will also get an output notification named as the input name with Change appended, carrying the new value as event object.
Model Inputs with default and required values
As you probably noticed in the previous examples, by creating a Model Input you can provide to the model( ) function a type argument to define the type of the ModelSignal value:
import { Component, model, ModelSignal } from '@angular/core';
@Component({ ... })
export class MyComponent {
myProp: ModelSignal<string | undefined> = model<string>();
}
Code language: TypeScript (typescript)Due to the optional nature of the input value, ModelSignal values are typed as possibly undefined.
To get rid of those, you can provide a default value to the model( ) function:
myProp: ModelSignal<string> = model('default');
Code language: TypeScript (typescript)Alternatively, you can define your Model Inputs as required thought a dedicated model.required( ) function:
myRequiredProp: ModelSignal<string> = model.required<string>();
Code language: TypeScript (typescript)Input options: alias and transform function
As classic Angular inputs, Model Inputs support also the alias option:
myProp = model('default-value', { alias: 'myPropAlias' });
Code language: TypeScript (typescript)Allowing us to decouple the child component input variable name and the DOM property name used by parent components to bound the input value:
<my-component [(myPropAlias)]="parentProp"></my-component>
Code language: HTML, XML (xml)Where is the transform( ) function?
Regarding the transform( ) function, the last classic inputs option we are familiar with, the model( ) function does not support it.
This make sense to me, just think about the conflicts between the two-way nature of Model Inputs, and the role of the transform( ) function to transform the input value only inside a component.
Luckily, you can overcome this absence using the computed( ) function, which allows you to define derived values starting from a Signal:
import { Component, computed, model, ModelSignal, Signal } from '@angular/core';
@Component({ ... })
export class MyComponent {
myProp: ModelSignal<string> = model('default');
myComposedProp: Signal<number> = computed(
() => this.modelOptional()?.length || 0
);
}
Code language: TypeScript (typescript)In this way the value defined using the computed( ) function is confined inside child component.
Thanks for reading so far 🙏
That’s all about Model Inputs.
If you did not, I recommend you to read my previous article “Angular Signal Inputs: road to Signal Components”.
There you will found a more exhaust explanation about the advantages of using Signal Inputs and Model Inputs.
As always, I’d like to have your feedback. 👋
