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

Рет қаралды 19,837

Күн бұрын

🔥 Conscious Angular Testing for Beginners with 10%-OFF (For the First 10 Students):
bit.ly/conscious-angular-test...
Recently, Angular 17.2 was introduced, which brings a new API that enables deeper integration of Signals into Angular components. One of these new functions is a function `model`, which enables the 2-way data binding and which one I am going to cover in this video. You will learn why it is not a replacement for NgModel, how to migrate to the new Signal-Based 2-way-data binding, and how to adjust your unit tests after the migration.
🕒 Time Codes:
00:00:00 - Intro;
00:01:05 - Why model() != NgModel;
00:04:33 - Migration to model();
00:07:29 - Adjusting Unit Tests;
00:12:08 - Outro;
🔗 Source code from the tutorial:
github.com/DMezhenskyi/angula...
💡 Short Frontend Snacks (Tips) every week here:
Twitter - / decodedfrontend
Instagram - / decodedfrontend
LinkedIn - / dmezhenskyi

Пікірлер: 58

@DecodedFrontend 4 ай бұрын

🔥 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 4 ай бұрын

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

@DecodedFrontend 4 ай бұрын

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

@danielnaydenov9899 4 ай бұрын

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 🎉🌟

@mar_frontend 4 ай бұрын

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

@smzhd9642 29 күн бұрын

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

@DecodedFrontend 28 күн бұрын

Thank you ❤️

@gagiksimonyan3782 4 ай бұрын

Thanks, Dmytro) useful as always

@zhdanvadim9536 4 ай бұрын

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

@DecodedFrontend 4 ай бұрын

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

@zhdanvadim9536 4 ай бұрын

@@DecodedFrontend maybe it will add more views =)

@johanheyvaert 4 ай бұрын

Your videos are fantastic. Thanks a lot! 🙂

@DecodedFrontend 4 ай бұрын

Thank you! Glad you like them 😊

@StanislavSukhanov 3 ай бұрын

Great content ❤

@asyncpipe 4 ай бұрын

signals look really powerful

@grafenau_digital_solutions 4 ай бұрын

Yes first one! nice Job man!

@DecodedFrontend 4 ай бұрын

Congrats 👏 😁

@ramalakshmanans-gb6xg 4 ай бұрын

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

@DecodedFrontend 3 ай бұрын

I am glad that you could learn something new :)

@ramalakshmanans-gb6xg 3 ай бұрын

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

@awaraamin6850 2 ай бұрын

Thank you

@haroldpepete 4 ай бұрын

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

@dmitrys8939 3 ай бұрын

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

@taiwokazeem9014 3 ай бұрын

Amazing

@jonatabiondiJsLover 4 ай бұрын

super

@codeSurvivor 4 ай бұрын

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 4 ай бұрын

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 4 ай бұрын

@@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 4 ай бұрын

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 4 ай бұрын

@@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 4 ай бұрын

@@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

@gowrisankaranandhan4801 3 ай бұрын

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

@dynamica1 4 ай бұрын

О, нова хата)

@DecodedFrontend 4 ай бұрын

😁

@sohailansari3106 3 ай бұрын

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

@georgeknap2631 4 ай бұрын

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

@MultiKumanosuke 3 ай бұрын

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

@DecodedFrontend 3 ай бұрын

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.

@TheZukkino 3 ай бұрын

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

@DecodedFrontend 3 ай бұрын

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

@rumonintokyo 4 ай бұрын

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 4 ай бұрын

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

@martinschulze5399 4 ай бұрын

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

@namobhagavathe 4 ай бұрын

Prime Ng was really useful for one of my projects

@rumonintokyo 4 ай бұрын

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 4 ай бұрын

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

@Billy_Herrington__ 4 ай бұрын

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

@across_the_rainbow_bridge 2 ай бұрын

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

@DecodedFrontend 2 ай бұрын

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 2 ай бұрын

@@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 2 ай бұрын

@@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?