{"id":1983,"date":"2024-02-21T14:42:19","date_gmt":"2024-02-21T22:42:19","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1983"},"modified":"2024-02-21T14:42:20","modified_gmt":"2024-02-21T22:42:20","slug":"model-for-signal-based-2-way-data-bindings","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/model-for-signal-based-2-way-data-bindings\/","title":{"rendered":"model() for signal-based 2-way data bindings"},"content":{"rendered":"\n

Angular 17.2 brought more features to the signal-based components<\/a> approach, where almost everything in our components will become signals. We’ve already covered that inputs can be signals<\/a> since Angular 17.1. <\/p>\n\n\n\n

As an Angular developer, you’ve probably used ngModel<\/code> in the past to create two-way data bindings. You might have created your own 2-way bindings using the approach covered in this tutorial<\/a>, too.<\/p>\n\n\n\n

All of that becomes even easier with Angular 17.2, as we can now do the following using the model<\/a><\/code> function:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

The above syntax means that we can pass a value to NameEntryComponent<\/code>‘s age<\/code> property as follows:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

We can even have a 2-way binding (meaning something that acts as both an input and an output) by using the “banana in a box” syntax as follows:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

This gets even better as we can specify that a value is required for that model input<\/strong> using model.required<\/code>:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Since age<\/code> and firstName<\/code> are signals, we can update their values using set<\/code> or update<\/code><\/a>:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Where increaseAge<\/code> is a method that uses an arrow function (as those aren’t supported in Angular templates):<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

You can see this example in action on Stackblitz here<\/a>.<\/p>\n\n\n\n

We can pass data to models using regular component properties:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

But it gets even better as we can also use signals as-is with these 2-way bindings:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

You can see this new example in action on Stackblitz here<\/a>. Next week, I will cover 4 more functions available since Angular 17.2, all signal-based as well!<\/p>\n","protected":false},"excerpt":{"rendered":"

Angular 17.2 brought more features to the signal-based components approach, where almost everything in our components will become signals. We’ve already covered that inputs can be signals since Angular 17.1. As an Angular developer, you’ve probably used ngModel in the past to create two-way data bindings. You might have created your own 2-way bindings using […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,8,29],"tags":[],"class_list":["post-1983","post","type-post","status-publish","format-standard","hentry","category-angular","category-components","category-signals"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1983","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1983"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1983\/revisions"}],"predecessor-version":[{"id":1993,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1983\/revisions\/1993"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1983"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}