🚦NEW Angular 17 model() feature ... You MUST Know This!

Advanced Angular concepts taught in an approachable way - angular-university.io
New details are available on how to use the model() bidirectional signal input. Check out more details:
- Official docs - angular.dev/guide/signals/model
- Angular Team Q&A - • Live coding and Q/A wi...
Timestamps:
00:59 What is the main use of model()?
07:35 Using model() with primitive values
09:10 what the [()] syntax actually means
Free content at the Angular University:
- 20% of our lessons are free, you don't have to login to watch the lessons. The free lessons are the ones with the P (Pro) - angular-university.io
- Watch the free Angular For Beginners Course - angular-university.io/course/...
Follow me:
Twitter - / angularuniv
Facebook - / angular.university
KZbin - / @angularuniversity
Instagram - / angular.university
LinkedIn - / angular-university
TikTok - / angularuniversity
Threads - www.threads.net/@angular.univ...

[@AngularUniversity]

Enjoy everyone, this is how model() is mostly meant to be used, although of course it can also be used for bi-directional data binding with plain member value properties 😊 Stay tuned as soon I have a big announcement to make regarding my courses 😉- angular-university.io

[@Nabulio85]

Thanks Vasco for all your videos, your channel, your blog 🙏🫶

[@AngularUniversity]

You're welcome, I'm glad you enjoy them 😊

[@ap_0011]

@10:25, shouldn't it be [value] instead of [(value)], because there's already (valueChange) event ?

[@collectingretrotech]

Another great video, thanks for the lessons. Specially your new angular 17 videos have been so very useful

[@AngularUniversity]

Thank you, I'll keep the coming, and Angular 18 RC0 is around the corner 😉

[@AlainBoudard]

Great presentation of Angular model function ! Thanks Vasco 👍😎

[@AngularUniversity]

Thank you Alain, please enjoy the video. More videos coming soon 😊

[@besara_]

Vasco, really like your tutorials

[@AngularUniversity]

Thank you, I'm happy to hear that 😊

[@KostasOreopoulos]

There are two main “questions” concerning signals 1. What will be the performance gains compared to onpush strategy 2. When zone.js can be dropped what is the gain in Kbs in bundle size compared to current size Of course type safety is a welcomed benefit from signals, but 1 &2 are more important in my opinion.

[@AngularUniversity]

Hi Kostas, great questions. I don't think it will be much faster than OnPush, if at all. The difference should be unnoticeable in 99.99% of cases. When zone is dropped, I think the gain will be around 100kb in zone alone. But also it will allow the use of native async/await in angular applications, I don't know if that will have much of an impact though. It's more of a thing for the future, zone.js size keeps increasing as more async APIs are added to the browser. I don't think the main benefits of signals will be performance or bundle size. The main benefit for me will be the simplified reactive programming model that makes RxJs optional, and avoiding certain errors that happen sometimes when using zones. 👍

[@JhersyNolasco]

Thank you for your video! one question, what version will it be available in?

[@AngularUniversity]

Thank you, it's now available on 17.3 😊

[@zajunc69]

how about upcoming signal outputs? What will be the difference between value = input() valueChange = output() and model value = model() ?

[@AngularUniversity]

Outputs won't be signals, but there is a new output() construct that much more type safe and integrated with RxJs, I've covered it here on the channel in this video 😊kzbin.info/www/bejne/hYSXlJ2qedKBd7c

[@z.a7512]

hello , thank you for this modern angular code , i have a question , lately i am using a combination between signals , models and effects in order to have a smart and easy logic , where i have two way binding using models which update the model on change and triggers an effect , but my effect should call a function which request an http call and subscribe to it , most docs advise not use much effects and i am not sure if i am allowed to use it with async call inside it ,any input about this case ? and if there a way we can schedule a 30 mins Q&A and if yes can you inform me about price please thank you

[@AngularUniversity]

Thank for commenting, I currently don't offer consulting but I think I can tell that you are using too much effect(). There shouldn't be HTTP calls from inside it, in fact it should rarely be used. Instrad, do the HTTP call on your click handlers, get back the response and set() or update() a signal, and that's it you don't need to involve an effect in the vast majority of HTTP operations. I recommend refactoring the code and removing most uses of effect(), I hope this helps.👍

[@z.a7512]

Thank you 🙏

[@z.a7512]

while using this model() approach to bind in angular material and used `// This automatically creates an output named "checkedChange". // Can be subscribed to using `(checkedChange)="handler()"` in the template. as they mentioned in docs , i noticed it the handler triggers multiple times , first time always have undefined. is it a bug from their side cz it is still developer preview?

[@AngularUniversity]

Angular Material does not support yet model inputs. I think certain components will support them in the future, like datepickers for example.

[@sch2412]

is this an alternative for implementing the ControlValueAccessor interface with custom controls?

[@AngularUniversity]

That's a great question. It's not a direct alternative as for example there is no validation and control form errors, but it's related. For a custom form control, main [value] input is recommended to be a model, as per the latest Angular Q&A session on the Angular channel. You can use both. Soon the Angular forms module will be redesigned into signals, so we will know more about it sometime this year I think 😉

[@sch2412]

@@AngularUniversityi am so looking forward to signal based forms. this will be such a game changer

[@AngularUniversity]

@@sch2412 Yes, soon a RFC should be started I think. I will cover it here in the channel 😊

[@manojht8036]

What editor do you use ?

[@AngularUniversity]

I use Webstorm, Monokai Pro theme for the videos for contrast, and Darcula for day to day coding. If you subscribe to a plan in the Angular University, you get a 6 month free trial license of Webstorm included. 😉

[@EnricoPedroni]

Hi, what if i get a complex object received from a server. With simple [(ngModel)] i can just pass object.param1 and it will be changed bydirectional. How can it be translate with signals and new model()?

[@AngularUniversity]

Great question, you mean using [()] as a replacement of ngModel, for setting the value of a primitive object type and not emitting a value for a signal? You can also do that, it also works that way. From the parent component perspective it works exactly as ngModel. From the child component perspective, the new value will still be emitted via a model signal.

[@EnricoPedroni]

I mean: 1- i put the complex object in a signal, 2- in the main component i have multiple wrapped input custom components (one for each property) and i dont want to create derived-.signals for each one of them starting from the first one (and from what i remember these signals will be readonly anyway no?). 3- In the wrapped input custom component i like to use the model signal to update the parameter. 4- When i update the single property i would like the entire complex signal to update and emit automatically instead of manually trigger that with effect(). This is what in my opinion will really simplify the code, if the complex object signal will emit if a property in it change. From what i understand this is possibile only if i pass a derived-signal of each property starting from the complex object signal and i use effect() to trigger those changes. @@AngularUniversity

[@GeraldScholz]

07:32 So why use signals in the first place?

[@AngularUniversity]

Hi Gerald, I couldn't find something in there related to your question. signals are a simpler way of propagating state in your application. Checkout my videos here on the channel on Signals. 👍

[@LarsRyeJeppesen]

I am quite confident in saying that I will probably never ever use this feature. Honestly I am baffled why they even implemented it :)

[@AngularUniversity]

😊I think it's for things like custom form controls, like date pickers, etc. that have a value input that can be modified by the custom control. If an application is using everywhere the pattern of passing signals as inputs, this will come in very handy. 😉But the patterns are still emerging, it's hard to predict what the community will adopt 👍

[@endlacer]

you shouldve not used a signal as the input for the Model-input. when using a Signal as input, you could just use a normal input as well and have the same behavior

[@AngularUniversity]

Actually the whole idea of model() is that we can in certain circumstances pass a signal to the child component. This establishes a signal-based contract the parent and the child component, where the signal is used as a bi-directional communication mechanism. To handle with care. 😉

[@endlacer]

@@AngularUniversity wouldn't this be possible with a normal input as well? I pass down a signal, which can be read/updated by the child-comp as well. so there would be no need for Model-input in that case, or what do I get wrong about this. in the case for non-signal Inputs it is different imo. when you pass in a bool for example, a change in the child does not get bubblep up to the patent. with model-input it would. so the real and only Benefit I see, is when using this without a signal, but a value