🔥 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
@amosisaila841610 ай бұрын
NOTE: model signals are writable from inside the component while the input() signals are a read-only. Great tuto!
@DecodedFrontend10 ай бұрын
Yes, and additionally emits the output event which reqular signals (as well as InputSignals) don't do :)
@smzhd96426 ай бұрын
Your channel is a treasure for angular developers. Keep it up bro. Respect infinity
@DecodedFrontend6 ай бұрын
Thank you ❤️
@codeSurvivor10 ай бұрын
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?
@DecodedFrontend10 ай бұрын
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 :)
@codeSurvivor10 ай бұрын
@@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 🙂
@DecodedFrontend10 ай бұрын
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 :)
@codeSurvivor10 ай бұрын
@@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! 🥰
@DecodedFrontend10 ай бұрын
@@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
@danielnaydenov989910 ай бұрын
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 🎉🌟
@TheZukkino9 ай бұрын
Can we apply this to forms? There's a lack in signal-reactive form relationship
@DecodedFrontend9 ай бұрын
Unfortunately no, we should wait until it is adopted by the ngModel directive because the model() needs to be used inside that directive.
@ZoheirElHouari5 ай бұрын
Thank you for the nice explanation and demo. well appreciated
@mar_frontend10 ай бұрын
Thank you for your explanation! From Georgia we're watching you! ☺
@zhdanvadim953610 ай бұрын
Thank you! I was expecting to hear the guitar playing at the end of the video)
@DecodedFrontend10 ай бұрын
Haha, I can actually start playing something in the end of each video 😅
@zhdanvadim953610 ай бұрын
@@DecodedFrontend maybe it will add more views =)
@rumonintokyo10 ай бұрын
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.
@DecodedFrontend10 ай бұрын
I know a one called NgZorro but I rarely used 3rd party ui libs except angular material
@martinschulze539910 ай бұрын
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-xbbsjsjsbna77710 ай бұрын
Prime Ng was really useful for one of my projects
@rumonintokyo10 ай бұрын
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
@ZoaibKhan10 ай бұрын
@@martinschulze5399 check out Spartan UI. It's in Alpha currently, but looks promising
@malikrajat15 күн бұрын
Thanks for video, really really cool..... as mention it is signal API . Will it work with non signal implementation ?.
@johanheyvaert10 ай бұрын
Your videos are fantastic. Thanks a lot! 🙂
@DecodedFrontend10 ай бұрын
Thank you! Glad you like them 😊
@MultiKumanosuke9 ай бұрын
Hi can you please give some info about the last section of the course on testing because I am thinking about buying it
@DecodedFrontend9 ай бұрын
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.
@gagiksimonyan378210 ай бұрын
Thanks, Dmytro) useful as always
@across_the_rainbow_bridge8 ай бұрын
Can someone tell me what is the benefit of using signals over behaviorSubjects?
@DecodedFrontend8 ай бұрын
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.
@DeathInFire8 ай бұрын
@@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_bridge8 ай бұрын
@@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?
@appeiroon10 ай бұрын
signals look really powerful
@Grafenau_digital_solutions10 ай бұрын
Yes first one! nice Job man!
@DecodedFrontend10 ай бұрын
Congrats 👏 😁
@ramalakshmanans-gb6xg10 ай бұрын
Wow never knew this shorthand for two way binding in custom components
@DecodedFrontend9 ай бұрын
I am glad that you could learn something new :)
@ramalakshmanans-gb6xg9 ай бұрын
@@DecodedFrontend Keep up the good work brother, Thanks a ton. big fan of your tutorials ❤️🙏
@StanislavSukhanov9 ай бұрын
Great content ❤
@sohailansari31069 ай бұрын
please make an video: I want some default value in @component decorator always, is there any way to create @customComponent decorator?
@Billy_Herrington__10 ай бұрын
А есть идеи почему у меня это все не работает? Падает с ошибкой Can't bind to textModel since it is not provided by any applicable directives. Буквально повторил все как на видео, кроме названия
@haroldpepete10 ай бұрын
great video, you take my question to make this video, i need a tiny mention, jijijijiijijiji
@dmitrys89399 ай бұрын
Hi! Thanks for the lessons=) Can yo make a video about nx?
@georgeknap263110 ай бұрын
Any way how to make `setInput` function type safe? (or input name safe)
@awaraamin68508 ай бұрын
Thank you
@dynamica110 ай бұрын
О, нова хата)
@DecodedFrontend10 ай бұрын
😁
@gowrisankaranandhan48019 ай бұрын
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
@taiwokazeem90149 ай бұрын
Amazing
@sereneabrahammathew973810 ай бұрын
Is expanded.update(expanded =>!expanded) Better than expanded.set(!expanded())
@DecodedFrontend10 ай бұрын
I think there is no difference here except the syntax