Angular Model - The New Signal-Based 2-way Data Binding

[@DecodedFrontend]

🔥 Conscious Angular Testing for Beginners with 10%-OFF (For the First 10 Students): bit.ly/conscious-angular-testing_U8YXaWwyd9k 💡 Short Frontend Snacks (Tips) every week here: Twitter - twitter.com/DecodedFrontend Instagram - instagram.com/decodedfrontend LinkedIn - www.linkedin.com/in/dmezhenskyi

[@amosisaila8416]

NOTE: model signals are writable from inside the component while the input() signals are a read-only. Great tuto!

[@DecodedFrontend]

Yes, and additionally emits the output event which reqular signals (as well as InputSignals) don't do :)

[@smzhd9642]

Your channel is a treasure for angular developers. Keep it up bro. Respect infinity

[@DecodedFrontend]

Thank you ❤️

[@danielnaydenov9899]

I’ve been following your videos now for probably over a year, and must say, you are my go-to creator when it comes to deep diving in angular APIs and practices. Keep up the good work 🎉🌟

[@zhdanvadim9536]

Thank you! I was expecting to hear the guitar playing at the end of the video)

[@DecodedFrontend]

Haha, I can actually start playing something in the end of each video 😅

[@zhdanvadim9536]

@@DecodedFrontend maybe it will add more views =)

[@ZoheirElHouari]

Thank you for the nice explanation and demo. well appreciated

[@appeiroon]

signals look really powerful

[@mar_frontend]

Thank you for your explanation! From Georgia we're watching you! ☺

[@codeSurvivor]

Thanks for the video, great as usual! I've never liked 2 way data binding, it looked in the Input/Output version as if the child component was being able to change the parent data, which from my POV, it's an anti-pattern. With the signals version it's actually modifying parent data since no output event is used anymore, and a writable signal is used... What do you think about that?

[@DecodedFrontend]

Hi:) Thanks for your question. I don’t see it as an anti-pattern, to be honest. As you can see in the first part of the video, the 2-way binding is nothing else as a regular input/output communication. The [()] is just a syntax sugar and a shorthand for a specific directive communication scenario to not write a lot of boilerplate. It just seems that with 2-way data binding the child modifies the value of the parent directly but it doesn't work like that :)

[@codeSurvivor]

@@DecodedFrontend Thanks for answering! Yes, in the 'classic' pre-signals way, it was just syntax sugar for input/output, but in the current one, a writable signal is passed to the child, so it can modify it. I called this an anti-pattern since I find it an imperative way of changing the parent local state, because the value of the signals can be modified in multiple places, and event worse, out of the parent scope. Maybe calling this an anti-pattern is too much, but I think it opens the door to spaghetti code. I'd be very happy if you could give me your opinion 🙂

[@DecodedFrontend]

Ok, now I see what you mean. Then I would agree with you if it is indeed just about providing the writable signal which value could be changed directly by the child. If you have some information/article about the internal implementation overview, I would be happy to read it because I didn't have time to investigate the internal implementation of the model. My assumption was that it is still being split under the hood into signal-based input/output pair (e.g., by the compiler) and has the same data flow as before, so .set() doesn't mutate the value of the signal directly but rather emits an output that assigns the value to the parent property, and it already propagates this new value to the [input] property of the directive where the .set() has been called. But again, I didn't have time for a deep dive, so I might be wrong :)

[@codeSurvivor]

@@DecodedFrontend You are totally right, I checked Angular documentation and they are keeping the same data flow based on input/output, just adding some syntax sugar to it, which will be transformed by the compiler. I assumed a writable signal was used instead. 😅 Anyways, I still find this quite handy, but misleading for someone who is not trained in programming best practices and patterns. Keep it up, you always publish great and clear content! Thanks! 🥰

[@DecodedFrontend]

@@codeSurvivor thank you :) By the way, I encountered an awesome article that can bring some light on the internal implementation. I quickly went through it and what is interesting, is that we both are right 😄 So, if you provide the simple value to the model() input - then it works through the input/output scenario. BUT if a signal is provided as a value, then it works in a similar way as you suggested. The link to an article is - itnext.io/model-inputs-reactive-two-way-binding-29a40c7626f2

[@ramalakshmanans-gb6xg]

Wow never knew this shorthand for two way binding in custom components

[@DecodedFrontend]

I am glad that you could learn something new :)

[@ramalakshmanans-gb6xg]

@@DecodedFrontend Keep up the good work brother, Thanks a ton. big fan of your tutorials ❤️🙏

[@johanheyvaert]

Your videos are fantastic. Thanks a lot! 🙂

[@DecodedFrontend]

Thank you! Glad you like them 😊

[@gagiksimonyan3782]

Thanks, Dmytro) useful as always

[@dmitrys8939]

Hi! Thanks for the lessons=) Can yo make a video about nx?

[@rumonintokyo]

Angular is great for large scale application and highly maintable... I was wondering what would you suggest for an UI library for angular other than Angular material.

[@DecodedFrontend]

I know a one called NgZorro but I rarely used 3rd party ui libs except angular material

[@martinschulze5399]

I feel like this is one of Angulars issues right now... this super limited selection, Im working (im forced to do web dev :( ) now on a React project the first just for this reason... there are just so many more libs for react overall and angular feels like too heavy for small to medium projects. But here are some that I found look good and allow some customization: - NgPrime - TaigaUI - Nebula - DevExtreme (although take care of licenses) - or just use TailwindCSS if you dont need super polished out of the box components What I am missing is somehow an "unstyled" library such as mantine, shedui, daisyUI etc. for react

[@user-xbbsjsjsbna777]

Prime Ng was really useful for one of my projects

[@rumonintokyo]

Yes exactly, I am familiar with angular material and have used it at work but Angular does not have libraries like Shadcn. Also I used to use angular flex layout library for css classes which is somewhat similar to tailwind css but it has been deprecated recently.@@martinschulze5399

[@ZoaibKhan]

​@@martinschulze5399 check out Spartan UI. It's in Alpha currently, but looks promising

[@Grafenau_digital_solutions]

Yes first one! nice Job man!

[@DecodedFrontend]

Congrats 👏 😁

[@MultiKumanosuke]

Hi can you please give some info about the last section of the course on testing because I am thinking about buying it

[@DecodedFrontend]

Hi! Thanks for your question and your interest. This section is being recorded currently. Unfortunately, it took a bit more time then I expected because some parts had to be re-recorded. I believe I will deliver that part in the end of the month or in the beginning of the April.

[@StanislavSukhanov]

Great content ❤

[@sohailansari3106]

please make an video: I want some default value in @component decorator always, is there any way to create @customComponent decorator?

[@TheZukkino]

Can we apply this to forms? There's a lack in signal-reactive form relationship

[@DecodedFrontend]

Unfortunately no, we should wait until it is adopted by the ngModel directive because the model() needs to be used inside that directive.

[@gowrisankaranandhan4801]

I really appreciate your contributions towards angular community❤. I am looking forward to boost developers to concentrates more on design patterns. If time permits can you brief design patterns of formgroupDirective and I want to replicate the same design pattern

[@Billy_Herrington__]

А есть идеи почему у меня это все не работает? Падает с ошибкой Can't bind to textModel since it is not provided by any applicable directives. Буквально повторил все как на видео, кроме названия

[@haroldpepete]

great video, you take my question to make this video, i need a tiny mention, jijijijiijijiji

[@georgeknap2631]

Any way how to make `setInput` function type safe? (or input name safe)

[@across_the_rainbow_bridge]

Can someone tell me what is the benefit of using signals over behaviorSubjects?

[@DecodedFrontend]

Signals are more lightweight alternative that works better for synchronous reactivity. Signals are being integrated deeper into Angular and will play significant role in e.g Change Detection. Also, all new features will be developed and optimized for signals e.g the new control flow syntax optimized for signals and should perform better with them.

[@DeathInFire]

​@@DecodedFrontendSo we can expect better performance change detection wise in general? Can we expect to get "Pipeable" signals in the future, which can provide something similar to observable's pipe? I think this would increase their potential significantly. I always had a problem with react effects when I have to specify "if this is null" then return and list such conditions at start of every function. Filter operator for example solves such issues in a much more nicer way. Thank you for replying.

[@across_the_rainbow_bridge]

@@DecodedFrontend What if i have a project which completely written with observables + subject+ detection.onPush and i replace all occurences of "async" pipe with "toSignal" pipe which changes observable to a signal. Will this result in a perfromace boost?

[@awaraamin6850]

Thank you

[@dynamica1]

О, нова хата)

[@DecodedFrontend]

😁

[@taiwokazeem9014]

Amazing

[@jonatabiondiJsLover]

super

[@sereneabrahammathew9738]

Is expanded.update(expanded =>!expanded) Better than expanded.set(!expanded())

[@DecodedFrontend]

I think there is no difference here except the syntax

[@thm007]

Merci !☕