Sometimes, the best parts of the Angular framework are the ones that aren’t even documented. You try something out, and it works beautifully, almost better than expected.
For instance, I was wondering if I could use ngModel with signals. Would the 2-way data-binding work that way?
So I did this:
@Component({
selector: 'app-root',
imports: [FormsModule],
template: `
`,
})
export class App {
name = signal('Angular');
}
And it works! We can use a Signal reference with ngModel, and the signal value gets synced with a text input.
That’s powerful because we can have that signal coming from a service and effortlessly synchronize service data with a form input without needing reactive or template-driven forms here.
Since Angular 17.2, we have a model() function to create 2-way data bindings at the component level. In other words, model defines a component input that is also an output and can be used like so:
Assuming that NameEntryComponent has two models defined as follows:
export class NameEntryComponent {
// age is a WritableSignal of type number with a default value of 21
age = model(21);
// firstName is also a Signal - that one requires a value of type string
firstName = model.required();
}
Now, let’s say I create a child component that uses model to create a two-way binding with its parent:
@Component({
selector: 'app-child',
imports: [FormsModule],
template: `
Hello from child {{ name() }}!
`,
})
export class ChildComponent {
name = model();
}
In my parent component, I can try to sync that name using a two-way data-binding:
And that works perfectly fine as well! The two components are fully reactive and in sync no matter what. We can update parent or child data with no difference:
One key benefit of Signals is removing the requirement that “data flows down” from parent to child components.
As you can see in my simple example, reactivity can be achieved in any direction with the use of Signals. Of course, we can expect even more powerful APIs soon as the Angular team prioritized Signal-based forms for 2025.
Want to see this code in action on Stackblitz? Here is the link.
My name is Alain Chautard. I am a Google Developer Expert in Angular and a consultant and trainer at Angular Training, where I help web development teams learn and become comfortable with Angular.
If you need any help with web development, feel free to get in touch!
If you enjoyed this article, please clap for it or share it. Your help is always appreciated. You can also subscribe to my articles and my Daily Angular Newsletter to receive helpful daily tips.
