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 🎉🌟
Hello my friend! Thanks for the tutorial. I have a question. In the case that I would like the ngModel to perform an update of the value using a ModelSignal how do I do it ? because using a ([ngModel]) works clearly but as I need the event to be emitted to the parent I need it to do an .update on the ModelSignal but this is not done by the ngModel so it does not update on the parent. What can I do in this case? I tried with a get and set and there if it works in the implementation of the set because there I receive the value and I do .update to the ModelSignal but ... is impractical if I have a very complex template I do not want to do a get and a set for each attribute I want to do databinding .... I remain attentive to your answer!
А есть идеи почему у меня это все не работает? Падает с ошибкой Can't bind to textModel since it is not provided by any applicable directives. Буквально повторил все как на видео, кроме названия
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?
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 :)
@@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 🙂
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 :)
@@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! 🥰
@@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
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.
@@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.
@@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?
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.
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.
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
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
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
🔥 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
NOTE: model signals are writable from inside the component while the input() signals are a read-only. Great tuto!
Yes, and additionally emits the output event which reqular signals (as well as InputSignals) don't do :)
Your channel is a treasure for angular developers. Keep it up bro. Respect infinity
Thank you ❤️
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 🎉🌟
Thank you for your explanation! From Georgia we're watching you! ☺
Thank you for the nice explanation and demo. well appreciated
Thank you!
I was expecting to hear the guitar playing at the end of the video)
Haha, I can actually start playing something in the end of each video 😅
@@DecodedFrontend maybe it will add more views =)
Hello my friend! Thanks for the tutorial. I have a question. In the case that I would like the ngModel to perform an update of the value using a ModelSignal how do I do it ?
because using a ([ngModel]) works clearly but as I need the event to be emitted to the parent I need it to do an .update on the ModelSignal but this is not done by the ngModel so it does not update on the parent. What can I do in this case?
I tried with a get and set and there if it works in the implementation of the set because there I receive the value and I do .update to the ModelSignal but ... is impractical if I have a very complex template I do not want to do a get and a set for each attribute I want to do databinding ....
I remain attentive to your answer!
Can we apply this to forms? There's a lack in signal-reactive form relationship
Unfortunately no, we should wait until it is adopted by the ngModel directive because the model() needs to be used inside that directive.
Your videos are fantastic. Thanks a lot! 🙂
Thank you! Glad you like them 😊
А есть идеи почему у меня это все не работает? Падает с ошибкой Can't bind to textModel since it is not provided by any applicable directives. Буквально повторил все как на видео, кроме названия
please make an video:
I want some default value in @component decorator always, is there any way to create @customComponent decorator?
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?
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 :)
@@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 🙂
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 :)
@@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! 🥰
@@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
signals look really powerful
Thanks, Dmytro) useful as always
Can someone tell me what is the benefit of using signals over behaviorSubjects?
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.
@@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.
@@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?
Thanks for video,
really really cool.....
as mention it is signal API .
Will it work with non signal implementation ?.
Any way how to make `setInput` function type safe? (or input name safe)
Yes first one! nice Job man!
Congrats 👏 😁
Hi can you please give some info about the last section of the course on testing because I am thinking about buying it
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.
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.
I know a one called NgZorro but I rarely used 3rd party ui libs except angular material
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
Prime Ng was really useful for one of my projects
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
@@martinschulze5399 check out Spartan UI. It's in Alpha currently, but looks promising
Great content ❤
Wow never knew this shorthand for two way binding in custom components
I am glad that you could learn something new :)
@@DecodedFrontend Keep up the good work brother, Thanks a ton. big fan of your tutorials ❤️🙏
great video, you take my question to make this video, i need a tiny mention, jijijijiijijiji
Hi! Thanks for the lessons=) Can yo make a video about nx?
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
Thank you
О, нова хата)
😁
Amazing
super
Is
expanded.update(expanded =>!expanded)
Better than
expanded.set(!expanded())
I think there is no difference here except the syntax
Merci !☕