Dev.to

Two-way bind a Signal Input object value with [(ngModel)]

Recently, I encountered this challenge... Refactor a form component to Angular Signals. The old form component works like this: The form data comes from a reactive state service The form data is an object The form data is cloned before it is passed to the form component The form component receives the form data via one classic decorator-based Angular @Input @Input({required: true}) user!: User; The form uses [(ngModel)] to mutate the form data object First Name Clicking the save button would send the mutated object to the parent component via an Angular @Output The parent component updates the reactive state service This setup works great in many of our applications. You can review this setup in this StackBlitz which showcases the basic principle: Form with classic Angular @Input Refactor to Signal Input With Angular Signal Input we can make our component inputs reactive. This sounds great! FYI Signal Inputs are the recommended way for new projects. From the Angular docs: Let's refactor our classic Angular @Input to a Signal Input: user = input.required(); Signal Input object value and [(ngModel)] The Signal Input receives an object of type User. We try to bind to the object properties with [(ngModel)]. This code looks so nice

Feb 15, 2025 - 12:43
 0
Two-way bind a Signal Input object value with [(ngModel)]

Recently, I encountered this challenge... Refactor a form component to Angular Signals.

The old form component works like this:

  • The form data comes from a reactive state service
  • The form data is an object
  • The form data is cloned before it is passed to the form component
  • The form component receives the form data via one classic decorator-based Angular @Input 
@Input({required: true})
user!: User;
  • The form uses [(ngModel)] to mutate the form data object 

   for="firstName">First Name
   id="firstName" name="firstName" [(ngModel)]="user.firstName" />
  • Clicking the save button would send the mutated object to the parent component via an Angular @Output
  • The parent component updates the reactive state service

This setup works great in many of our applications.

You can review this setup in this StackBlitz which showcases the basic principle: Form with classic Angular @Input

Refactor to Signal Input

With Angular Signal Input we can make our component inputs reactive. This sounds great!

FYI Signal Inputs are the recommended way for new projects. From the Angular docs:

Image description

Let's refactor our classic Angular @Input to a Signal Input:

user = input.required<User>();

Signal Input object value and [(ngModel)]

The Signal Input receives an object of type User. We try to bind to the object properties with [(ngModel)].

This code looks so nice

Read More

Tags:

Previous Article

How to Create Your First Flutter App from Scratch

Next Article

AMAZON CLOUDWATCH

Related Posts

Drive API now support folders with limited access

Drive API now support folders with limited access

Mar 17, 2025  0

Generated Content from www.outdoorlife.com

Generated Content from www.outdoorlife.com

Mar 19, 2025  0

[Tutorial] Chapter 3: Task Data Management

[Tutorial] Chapter 3: Task Data Management

Feb 19, 2025  0