Learn Angular Signals - The Future of State Management

Learn Angular Signals which is a new abstraction and alternative to NgZone and RxJS. This is a new way of setting and getting value which is available starting from Angular 16
TIMESTAMPS
0:00 Introduction
1:44 Using Angular Signals
3:31 Angular signals set method
5:25 Angular signals update method
6:07 Angular signals mutate method
6:40 Effects in Angular signals
7:47 Computed in Angular signals
8:39 My thoughts
► CHECK MY COURSES - monsterlessons-academy.com/co...
MOST POPULAR COURSES
► Building real project with Angular + NgRx - monsterlessons-academy.com/co...
► Building real NestJS API - monsterlessons-academy.com/co...
► Javascript interview questions - monsterlessons-academy.com/co...
► Building real fullstack project - monsterlessons-academy.com/co...
► Mastering Git - monsterlessons-academy.com/co...
► Mastering Docker and Docker Compose - monsterlessons-academy.com/co...
► Building real project with React Hooks - monsterlessons-academy.com/co...
► Building real project with Vue + Vuex - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
► INSTAGRAM - / monsterlessonsacademy
► TIKTOK - / monsterlessonsacademy
REFERENCES
► Source code - github.com/monsterlessonsacad...

[@Brendan2Alexander]

Helpful and concise thank u!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@1306dk]

I always look forward to your content. Any plans on getting in testing in Angular with Jest for example?

[@MonsterlessonsAcademy]

Thank you for the idea. I will add it to the list of future videos.

[@jsiahaan]

Great video! Thanks

[@MonsterlessonsAcademy]

You're welcome!

[@ajinkyachanshetty]

Amazing content!

[@MonsterlessonsAcademy]

Glad you think so!

[@gowthamp5612]

For me,signal just looks like useState and useEffect in React,with more functionalities like mutable and compute.But,in my opinion change detection will easier and quicker by signals.

[@MonsterlessonsAcademy]

I agree. Looks like copy pasting ideas from React

[@andres3665]

They are copying and pasting from solid.js@@MonsterlessonsAcademy

[@MultiWarrr]

Sorry for out of context question, in ngrx can and should i update state from the backend service without any actions dispatched from from user (commercial platform) Thanks in advance

[@waelm.elsaid295]

Thank you very much for your valuable content , but i need to ask a question regarding the computed and specially for the example you used what the different between calling usersTotal() in the html template and calling users().length directly ? is there any advantage of using computed in this case ? and thanks again

[@MonsterlessonsAcademy]

In this case not really. computed is some logic that you want to compute. Reading length has no logic so you don't need computed. It is also a good place for logic which you don't want to write in html.

[@mugatu2017]

Excellent explanation

[@MonsterlessonsAcademy]

Glad you like it!

[@mugatu2017]

@@MonsterlessonsAcademy we have in rxjs multicast operators (BehaviorSubject - ReplySubject - AsyncSubject, EventEmitter) son we can achieve exactly the saqme as Signals

[@nandhakumarappusamy9457]

Very helpful

[@MonsterlessonsAcademy]

Glad you think so!

[@SteDeus]

The video was very clear! I just didn't understand how effect works: how does it know to trigger when title is changed and not when users does? Does it trigger every time any signal change?

[@MonsterlessonsAcademy]

As for now effect is called if any signal changes. I would like to see some api to trigger it only for specific signal similar to dependencies of useEffect in react

[@luczztem]

@@MonsterlessonsAcademy wow that's very weird...

[@SteDeus]

@@MonsterlessonsAcademy Oh I see, I hope they give us a way to specify which effect should trigger or we have to make some custom shenanigans 😅

[@baluditor]

Effects will only run if any of their dependencies change, from the docs: Effects always run at least once. When an effect runs, it tracks any signal value reads. Whenever any of these signal values change, the effect runs again. Similar to computed signals, effects keep track of their dependencies dynamically, and only track signals which were read in the most recent execution.

[@d1ge]

Signals are not just easier to grasp, than RXJS, but they are also closer to what's actually happening under the hood. - the fact alone, that your effect methods now can run sync instead of async, without frankensteining your ngOnChange method, is a feature in itself

[@MonsterlessonsAcademy]

Yeap

[@tarquin161234]

At the moment I just don't really like the idea of making async things sync just by using toSignal with an arbitrary initial value. Sometimes, effects don't work as desired/expected when this arbitrary value comes in as the first value before the database value. For example, my effect needed to calculate a default value for a form field when it was null, so I did it in an effect, but the problem was this arbitrary value came in before the db value and so the wrong value was assigned to the form field. In my opinion, it is better to just wait for the database value, which means using rxjs instead of a signal. In my opinion it is better to use rxjs for async stuff, and use signals for sync stuff if you want, but for me I find it simpler to just use rxjs for everything.

[@farrukhmomin5291]

I really don't like the esthetics of signals. Code separation which ngrx offers make code base really clean. I hope angular team comes up with something which makes code looks cleaner.

[@MonsterlessonsAcademy]

You can continue use ngrx and they will use signals underneath.

[@bullettime2808]

you are comparing apples with oranges

[@ismailuwair187]

is it better in general to use signals instead of variables that are binded to UI for example?

[@MonsterlessonsAcademy]

Yes it is better.

[@paweliszewski6575]

hello, what text editor are you using? love the channel

[@MonsterlessonsAcademy]

It's Vim here is my video about it kzbin.info/www/bejne/j6Ovmqidec12q80

[@LukeAvedon]

Wow. Hey, really likeing your paid course my guy.

[@MonsterlessonsAcademy]

Glad to hear that!

[@thorstenschmidt21]

Hi, exists something like a benchmark? I learned that we should not call functions in Angular because it will make the app significantly slower. But with the signal you added a function to the view. How fast is it compared to older approaches?

[@MonsterlessonsAcademy]

I didn't see any benchmarks or real app comparisons yet.

[@baluditor]

Calling signals is not like calling a function, it's perfectly safe to do. Calling a function is discouraged due to Angular's change detection mechanism, but signals won't trigger change detection like functions would in the template.

[@thorstenschmidt21]

@@baluditor thank you, I had a chance to look into angular 16 now too and I think you are right.

[@mahdikamran8061]

Hello, Thanks for your videos. I have a question, are you from Germany? where are you from?

[@MonsterlessonsAcademy]

Hi, originaly from Ukraine but last 8 years living in Hamburg.

[@fastestnotes1046]

I don't get it. Why can't we just use the ngModel directive with events? It doesn't make sense to use a variable like title as a method call.

[@MonsterlessonsAcademy]

ngModel works through change detection cycle and signals not. Change detection cycle is slow on big apps and signals not.

[@L-Lesiv]

So signals need only for not enter in life cycles, they are not accesible from other components like subjects?

[@MonsterlessonsAcademy]

You can put them in service and reuse everywhere

[@L-Lesiv]

Why do we need [value]="title()" in html if we change signal in event function?

[@MonsterlessonsAcademy]

Because we need to render a value in the input

[@yaghuzt]

Hi, I am a bit confused, to me it looks like ngModel, whats the difference?

[@MonsterlessonsAcademy]

It doesn't trigger Angular change detection cycle. It is extremely fast in big apps

[@riatec6741]

Can we cancel a signal that has been created?

[@MonsterlessonsAcademy]

Why do you need to do that? It is not a subscription. It's the same like creating a subject. I doesn't cause performance problems.

[@nobrainer616]

@@MonsterlessonsAcademywhy not just use the BehaviorSubject instead of signal? is there some other cases of signal usage that I’m missing?

[@anutaNYC]

Target with a g as in girl not j

[@chrisburd9751]

I still think Rxjs is better than signals.

[@MonsterlessonsAcademy]

They are different

[@chrisburd9751]

@@MonsterlessonsAcademy I disagree - they both do state management, they both can interconnect components, and they both stream data the same way. In fact they are really no different than a behavior subject.

[@pietrosmusi1409]

they are copying from react and vue lol

[@MonsterlessonsAcademy]

Yeap a bit

[@maciej12345678]

@effectssss