Angular Signals: The Complete Guide

[@shyamplays]

awesome!!!! Thanks for detailed explanation, Please make a complete tutorial series on angular 18 with all new concepts.

[@WebTechTalk]

Nice idea. I will create one video.

[@renrenklein_th]

Great video I love how you show all of your points using examples and not just assuming people can learn just by being told the concepts. Very nicely done.

[@WebTechTalk]

Thanks a lot 🙏

[@84Joooli]

Thank you for the examples showing why to use these! The first simple example was really all that was needed :) and your real world scenario added the explanation of why we sometimes should allow for setting values inside an effect, great!

[@WebTechTalk]

Thank you so much for your great feedback.

[@mahmoudsamir6876]

I appreciate the time and effort you put into each video.

[@WebTechTalk]

Thank you so much 🙏

[@immohammadjaved]

Hats off to you🎉, the simplest tutorial of signal

[@WebTechTalk]

Thank you so much 🙏

[@matthewdolman]

This was a really concise explanation, great work

[@WebTechTalk]

Thank you so much

[@ananda2153]

Detailed explanation of signals with a real time example. Thanks for sharing the knowledge !!

[@WebTechTalk]

Thank you so much.

[@PrathyushaReddyChalla]

Great video. You cleared all my doubts . Thanks A lot !!!

[@WebTechTalk]

Thank you so much

[@LexMadafaka]

Very very useful and understandable example. Thanks you.

[@WebTechTalk]

Thank you so much 🙏

[@ayushsharma397]

Amazing, complete video, Thanks!

[@WebTechTalk]

Thank you so much 😊

[@jaykamau2753]

Liked and subscribed! Thank you for the explanation

[@WebTechTalk]

Thank you so much 🙏

[@makannanagaraj3060]

Precise explanation, Thank you for your effort

[@WebTechTalk]

Thank you so much

[@chandrahaasvemula7251]

Fantastic explanation; he has such a nice Indian tone!!

[@WebTechTalk]

@@chandrahaasvemula7251 Thank you 🙏

[@huw1676]

Really good explanation. Thank you

[@WebTechTalk]

@@huw1676 Thank you

[@SumitKhanduri]

Quick question Do we have to use same instance of TodoService to make it work with signals, instead of => {providedIn: root} can we use => providers:[MyService] But then what is the point of Signals then, i can build the same functionality without signals using shared service. PS: what i am trying to understand is that what advantage signals provides here then.

[@WebTechTalk]

Good question. Yes, we need to have same instance of service, otherwise we cannot share the same signal. The benefit of signals is more related to reactive programming. For example, in an add to cart application, we can share data through service, but if the data changes that will not be notified to the other components unless we use a Subject mechanism or Emitter mechanism. But this will be solved when we use Signals. Also, Signals are recently introduced, and some APIs are getting changed. So, we may expect more features in the upcoming angular releases.

[@Remirured]

Great video, thank you sir

[@WebTechTalk]

Thank you so much

[@jashneaaftabi]

Your every video is ahead of time or I can say AOT 😂 kudos to you 🎉👍

[@WebTechTalk]

Thank you so much 😀

[@parmarkamlesh6493]

Hi , very interesting topic and thanks for sharing, can we use signal to change value of radio button based on some conditions at run time and vise versa.? If yes how? The radio button component is in another component and the data which we are processing is in another component. So here we need communication as well between components.

[@WebTechTalk]

@@parmarkamlesh6493 Yes we can do. Usually we use the @output or behaviour subject. We can use signals instead of that. We can directly bind the signal value to the radio button value.

[@Hamir.]

learned with pratical examples

[@WebTechTalk]

Thanks

[@ommo289]

thank you sir for a good and short compilation of the whole theme one question about your real life example: when creating an effect for calling refreshCart() function you said "whenever my cart signal is changed". And there is no single signal value used inside the effect function. Does it mean that effects listen ALL signals that are in the scope of a component (meaning every signal that is stored inside cartService or other dependencies)? Or does it happens because you're actually calling set function of your signal inside of refreshCart (which in it's turn is called inside an effect)?

[@WebTechTalk]

Very good question. The effect is triggered because of this line of code. this.cartService.cart() in the for loop. As I am using the cart signal inside the refreshCart function, whenever its value changes the effect will be triggered.

[@sandeep_gandham]

Good concelt sir❤👌

[@WebTechTalk]

Thank you so much

[@godexpubg2957]

Thanks a lot

[@WebTechTalk]

Most welcome

[@mraihiamine2907]

Sir do you have the project in GitHub?

[@WebTechTalk]

Yes. You can find in the same GitHub repo.

[@mraihiamine2907]

@@WebTechTalk the link please

[@WebTechTalk]

@@mraihiamine2907 github.com/freelancer-surender/Angular-General

[@mraihiamine2907]

Thank you so so so much sir 🥰

[@mmkbhdk]

can u share your github repo for the video example code?

[@WebTechTalk]

You can find all codes related to angular advanced concepts here. github.com/freelancer-surender/Angular-General

[@mmkbhdk]

@@WebTechTalk Thanks a lot

[@videogenix5510]

Sir please make a video of project using advanced concepts. Also now angular 18 is out and i am waiting for your videos to know in simple way angular 18 features. Btw way i want to tell you that i switch from my company by learning angular from your zero to hero and hero to superhero series. Whoever asks me i share your channel. Its best and simple. Thanks.

[@WebTechTalk]

Thank you so much 👍 So happy to hear that my videos helped you in your career advancement. Definitely I will create a video on complete project using advanced concepts.

[@ghostinplainsight4803]

I'll never understand why they chose to make us call the signal function to get the value `signal()`, rather than using a `signal.value` getter or `signal.value()` method. To me it looks confusing calling a function to get a value from a signal. The convention of rxjs and the async pipeline seems better to me.

[@WebTechTalk]

Yes true. This is a confusing syntax. But we will be familiar with it when we use it often, like how *ngFor and *ngIf was in the beginning, instead of traditional for and if syntax in other programming.

[@danielvega646]

This is basically Angular implementing React. Now we have fewer reasons to use React, lmao.

[@WebTechTalk]

Yes :)

[@sunil24sunil]

bro i need parent child concepts using output input

[@WebTechTalk]

Please see this video bro kzbin.info/www/bejne/pGW4lXyMlpifr6c

[@anutaNYC]

I am still not clear how we know that effect will not trigger infinite changes?

[@WebTechTalk]

Effect will trigger infinite changes only when we are setting some value inside the effect which triggers another effect and the loop continues.

[@videogenix5510]

Why you stopped sharing github for advanced concepts? Can you please share them?

[@WebTechTalk]

I usually push the code once after the video is published. You can check now.

[@arunrocky5629]

Why are we polluting the constructor again?? Professionals say we are not supposed to write any business logic in the constructor. Why are we writing effects in the constructor?

[@WebTechTalk]

You are right. I should have used inject and use effects outside constructor. But I thought it may confuse the viewers. Also, I have read somewhere we can use effects in constructor with caution. As this is a small app, I thought of using in constructor itself.

[@matthewkk5087]

Its same like react usestate as I see

[@WebTechTalk]

Yes. And effect is somewhat similar to useEffect.

[@igorr4682]

It's very disappointing and discouraging that we don't have any English-speaking individuals who can effectively teach others in a proper way.

[@WebTechTalk]

Sorry bro I am not a native English speaker

[@mohammedhussain602]

Well u try teaching this subject nothing stopping, or u saying ur English is not up to spec😂

[@Zhene4eg]

Okay, so looks like Angular team want's to stop using ReactiveX(RxJS) - and use their own approach istead. Looks like main idea of signals - remove third party RxJS from Angular, am I right ?

[@WebTechTalk]

Reactive programming is always good and Angular is moving towards the same. We still need RxJS. Also angular is improving performance in many ways. One such way is through Signals.

[@Zhene4eg]

@@WebTechTalk thanks :)