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

  Рет қаралды 26,729

Decoded Frontend

Decoded Frontend

Күн бұрын

Пікірлер: 61
@DecodedFrontend
@DecodedFrontend 10 ай бұрын
🔥 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
@amosisaila8416 10 ай бұрын
NOTE: model signals are writable from inside the component while the input() signals are a read-only. Great tuto!
@DecodedFrontend
@DecodedFrontend 10 ай бұрын
Yes, and additionally emits the output event which reqular signals (as well as InputSignals) don't do :)
@smzhd9642
@smzhd9642 6 ай бұрын
Your channel is a treasure for angular developers. Keep it up bro. Respect infinity
@DecodedFrontend
@DecodedFrontend 6 ай бұрын
Thank you ❤️
@codeSurvivor
@codeSurvivor 10 ай бұрын
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
@DecodedFrontend 10 ай бұрын
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
@codeSurvivor 10 ай бұрын
@@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
@DecodedFrontend 10 ай бұрын
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
@codeSurvivor 10 ай бұрын
@@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
@DecodedFrontend 10 ай бұрын
@@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
@danielnaydenov9899
@danielnaydenov9899 10 ай бұрын
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 🎉🌟
@TheZukkino
@TheZukkino 9 ай бұрын
Can we apply this to forms? There's a lack in signal-reactive form relationship
@DecodedFrontend
@DecodedFrontend 9 ай бұрын
Unfortunately no, we should wait until it is adopted by the ngModel directive because the model() needs to be used inside that directive.
@ZoheirElHouari
@ZoheirElHouari 5 ай бұрын
Thank you for the nice explanation and demo. well appreciated
@mar_frontend
@mar_frontend 10 ай бұрын
Thank you for your explanation! From Georgia we're watching you! ☺
@zhdanvadim9536
@zhdanvadim9536 10 ай бұрын
Thank you! I was expecting to hear the guitar playing at the end of the video)
@DecodedFrontend
@DecodedFrontend 10 ай бұрын
Haha, I can actually start playing something in the end of each video 😅
@zhdanvadim9536
@zhdanvadim9536 10 ай бұрын
@@DecodedFrontend maybe it will add more views =)
@rumonintokyo
@rumonintokyo 10 ай бұрын
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
@DecodedFrontend 10 ай бұрын
I know a one called NgZorro but I rarely used 3rd party ui libs except angular material
@martinschulze5399
@martinschulze5399 10 ай бұрын
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
@user-xbbsjsjsbna777 10 ай бұрын
Prime Ng was really useful for one of my projects
@rumonintokyo
@rumonintokyo 10 ай бұрын
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
@ZoaibKhan 10 ай бұрын
​@@martinschulze5399 check out Spartan UI. It's in Alpha currently, but looks promising
@malikrajat
@malikrajat 15 күн бұрын
Thanks for video, really really cool..... as mention it is signal API . Will it work with non signal implementation ?.
@johanheyvaert
@johanheyvaert 10 ай бұрын
Your videos are fantastic. Thanks a lot! 🙂
@DecodedFrontend
@DecodedFrontend 10 ай бұрын
Thank you! Glad you like them 😊
@MultiKumanosuke
@MultiKumanosuke 9 ай бұрын
Hi can you please give some info about the last section of the course on testing because I am thinking about buying it
@DecodedFrontend
@DecodedFrontend 9 ай бұрын
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.
@gagiksimonyan3782
@gagiksimonyan3782 10 ай бұрын
Thanks, Dmytro) useful as always
@across_the_rainbow_bridge
@across_the_rainbow_bridge 8 ай бұрын
Can someone tell me what is the benefit of using signals over behaviorSubjects?
@DecodedFrontend
@DecodedFrontend 8 ай бұрын
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
@DeathInFire 8 ай бұрын
​@@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
@across_the_rainbow_bridge 8 ай бұрын
@@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?
@appeiroon
@appeiroon 10 ай бұрын
signals look really powerful
@Grafenau_digital_solutions
@Grafenau_digital_solutions 10 ай бұрын
Yes first one! nice Job man!
@DecodedFrontend
@DecodedFrontend 10 ай бұрын
Congrats 👏 😁
@ramalakshmanans-gb6xg
@ramalakshmanans-gb6xg 10 ай бұрын
Wow never knew this shorthand for two way binding in custom components
@DecodedFrontend
@DecodedFrontend 9 ай бұрын
I am glad that you could learn something new :)
@ramalakshmanans-gb6xg
@ramalakshmanans-gb6xg 9 ай бұрын
@@DecodedFrontend Keep up the good work brother, Thanks a ton. big fan of your tutorials ❤️🙏
@StanislavSukhanov
@StanislavSukhanov 9 ай бұрын
Great content ❤
@sohailansari3106
@sohailansari3106 9 ай бұрын
please make an video: I want some default value in @component decorator always, is there any way to create @customComponent decorator?
@Billy_Herrington__
@Billy_Herrington__ 10 ай бұрын
А есть идеи почему у меня это все не работает? Падает с ошибкой Can't bind to textModel since it is not provided by any applicable directives. Буквально повторил все как на видео, кроме названия
@haroldpepete
@haroldpepete 10 ай бұрын
great video, you take my question to make this video, i need a tiny mention, jijijijiijijiji
@dmitrys8939
@dmitrys8939 9 ай бұрын
Hi! Thanks for the lessons=) Can yo make a video about nx?
@georgeknap2631
@georgeknap2631 10 ай бұрын
Any way how to make `setInput` function type safe? (or input name safe)
@awaraamin6850
@awaraamin6850 8 ай бұрын
Thank you
@dynamica1
@dynamica1 10 ай бұрын
О, нова хата)
@DecodedFrontend
@DecodedFrontend 10 ай бұрын
😁
@gowrisankaranandhan4801
@gowrisankaranandhan4801 9 ай бұрын
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
@taiwokazeem9014
@taiwokazeem9014 9 ай бұрын
Amazing
@sereneabrahammathew9738
@sereneabrahammathew9738 10 ай бұрын
Is expanded.update(expanded =>!expanded) Better than expanded.set(!expanded())
@DecodedFrontend
@DecodedFrontend 10 ай бұрын
I think there is no difference here except the syntax
@jonatabiondiJsLover
@jonatabiondiJsLover 10 ай бұрын
super
@thm007
@thm007 10 ай бұрын
Merci !☕
Angular Resource API - Everything You Have To Know (so far)
27:58
Decoded Frontend
Рет қаралды 18 М.
Master RxJS Operators in Angular: A Complete Guide in Tamil
9:53
Learn Smart Coding in Tamil
Рет қаралды 36
We Attempted The Impossible 😱
00:54
Topper Guild
Рет қаралды 56 МЛН
So Cute 🥰 who is better?
00:15
dednahype
Рет қаралды 19 МЛН
Tuna 🍣 ​⁠@patrickzeinali ​⁠@ChefRush
00:48
albert_cancook
Рет қаралды 148 МЛН
Input Signals in Angular 17.1 - How To Use & Test
14:34
Decoded Frontend
Рет қаралды 31 М.
Why Angular Signals? Write Your First Signal
14:25
Angular University
Рет қаралды 16 М.
Why didn't the Angular team just use RxJS instead of Signals?
8:15
Joshua Morony
Рет қаралды 104 М.
TOP 6 Mistakes in RxJS code
18:35
Decoded Frontend
Рет қаралды 24 М.
Angular 19 Resource API is exactly what we needed!
15:38
Zoaib Khan
Рет қаралды 3,5 М.
Angular Unit Testing | TOP 5 Mistakes to Avoid
23:36
Decoded Frontend
Рет қаралды 8 М.
🚦NEW Angular 17 model() feature ... You MUST Know This!
11:19
Angular University
Рет қаралды 6 М.
We Attempted The Impossible 😱
00:54
Topper Guild
Рет қаралды 56 МЛН