First look at Signals in Angular

[@DecodedFrontend]

💥 Start to develop Angular Forms like a PRO with my in-depth Course💥 🔗 10% discount for the first 10 students - bit.ly/advanced-ng-forms-10

[@mukeshm280]

Can I get a coupon code?

[@DecodedFrontend]

@@mukeshm280yes, just write me at [e-mail]

[@luqeckr]

is there any certificate (of completition at least) after finishing the course?

[@DecodedFrontend]

@@luqeckr Hi! yes, there is a certificate of completion

[@haroldpepete]

when the master talk about something new about angular, students just listen and learn, you're in a point where i only believe in your videos and all that things you show me in angular, keep it real

[@darwinwatterson1732]

Finally! I was waiting for this video. Thanks a lot for you dedication!

[@DecodedFrontend]

Thanks a lot for your support! :)

[@AlainBoudard]

Excellent presentation as always ! Thanks for the great content 😎

[@josephsackeykontor4138]

I love this change. Thanks for the clear explanation

[@julienwickramatunga7338]

Thank you for the clear explanations and code samples! Can't wait for this feature to be released as stable, as you said, it will be a nice way for Angular to become more attractive to newcomers 🙂

[@MoMoadeli]

Thanks!

[@magda77850]

great introduction to signals! Thanks 😄 can't wait to see next video about change detection 😉

[@DecodedFrontend]

Thank you! in 2 weeks ;)

[@srushtidaware7978]

This resembles me towards React's state variable(signal in angular) and useEffect(effect in angular)

[@d34d10ck]

Or the upcoming runes in Svelte 5. It's all the same basically.

[@povezlo46]

With each new video the design of your room looks better and better))

[@DecodedFrontend]

Haha, hopefully the content quality as well 😄

[@miroslavjakovcic4585]

Nice. Do you have any recommendation on how to employ Signals for input fields in reactive forms, especially with custom validation?

[@mihaioltean6008]

Hey Dymtro, this one came exactly on time. I was trying to understand what's with the hype and you provided a clear explanation to me. Thanks! Got two questions: 1.) Usually, when we transform a value in the template we usually do it through pure pipes in order to avoid unnecessary change detection. Do you think that signals will make pipes obsolete? 2.) Isn't there a chance of circular dependency between computed signals? I wonder if it will be marked in a way at build time or through lint

[@genyklemberg]

whant to know also

[@DecodedFrontend]

Hi :) Thanks for your questions. 1) Well, I don't think that pipes will become obsolete. Optimization of CD isn't their direct responsibility, they are being used in order to transform data in a template and the pipe doesn't care if the value comes from Signal, class property, or from another pipe (e.g async pipe). 2) Good question. I think this question is better to ask maybe here github.com/angular/angular/discussions/49090 because frankly speaking, the topic is very new and I don't have enough knowledge yet to answer this question :)

[@hfspace]

nice questions!

[@Hariharan0606]

Thanks a lot for this video !! waiting for change detection :)

[@asifnawazmiani]

Well, no words than just Love you bro, just damn stuck on your channel hehe, for this kind of detailed videos on Angular ❤️

[@ihor-pidhornyi]

Great overview, thank you! It could be great to see how signals will look with different components comunications on different levels. For istance, via services or how it'll look with @Input ? Do we need to write setter in case to set signal from parent to child? And it seems great this will reduce amount of async pipes in templates and takeUntils in component code. As I see, it'll also reduce amount of rxjs code, for example we can all forget about combineLatest, and just use signals in the effect and in the computed. Correct me if I'm wrong)

[@DecodedFrontend]

Yes, you are right 🙌 about @Inputs() and signals there will be information soon 😉

[@yogeshalwani9256]

like observable, does signal need to be destroyed or unsubscribed when view destroyed ? are angular teams sure about no consequences like an observable leak will occur while using the signal over than rxjs ? I am very excited to use this on behalf of the component store of ngrx.

[@nephilimson]

Great presentation but I'm still curious how the compute and effect know the signals have changed in their callbacks. Appreciate it if you could make a video of how the signal and hooks work under the hood Thanks

[@ivanperun3565]

Thank you for video ). What about template rendering ? If I use onPush strategy and ngZone: noop (zoneless), signals don't update in template, I should use cdRef.detectChanges() for rerender compnent template. Maybe I didn't fully understand, but how does the template know if the signal has been updated without using zones. I do not want overendering , need to render only specific component or some scope of component (also used rx-angular/template).

[@zhdanvadim9536]

Thanks for the new video!

[@MrKOHKyPEHT]

Since angular 16 is coming I've decided to watch this video again...and again...and again (just in case) :)

[@ivandynysiuk4341]

Thanks for the clear explanation 😎

[@Aliakbaresmaeiliiii]

there is no word to say for this good video❤💙

[@jediampm]

Hi, thanks for the video. As Angular dev since version 2+ used in professional projects , for me is a big BREAKING CHANGES and BS. They should choose the svelte way, which in terms of DX is better as much close to what exist now. They choose the solidjs / vue way, in my opinion wrong. if this is accepted and moved to stable, i will have to make a choice, which will be to find another job and choose another framework. Because i will not waste my time to learn this and to update the company app to use this hell verbose BS syntax. this will be the real end of this framework because they didnt learn what happen with angularjs to angular 2.. A lot dev switch from angularjs to react or vue. Good luck to all still Angular devs. ;)

[@yuriinadilnyi3029]

As always well done 👍

[@musoverda]

Are there already any standards (generally accepted rules) for writing variable names for signals?

[@DecodedFrontend]

Hi! There are no such rules as far as I know :)

[@ommo289]

thanks Dmytro for nice presentation!

[@mahendranath2504]

Thank you so much for the amazing content, subscribed and liked🙌🙌👌👌😍😍👍👍

[@balajibalamurugan8053]

I was waiting for this video, Finally 🤩

[@DecodedFrontend]

🎉 Yeeah!!! I hope you'll like it ;)

[@afsirlaghari3738]

Thank you, dear...Me, watching your videos from Pakistan.

[@beeTechSE]

Hi, dear Dmytro. Would you please create another video about signals and describe the new APIs that have been added to it? I cannot wait until you create that video.

[@mouazalkhodari6407]

very lovely and self explained video thank you keep going

[@lhargil]

Thank you very much for a very good explanation!

[@DecodedFrontend]

Glad you liked it :)

[@ihoryanovchyk]

Thanks, Kozache!

[@DecodedFrontend]

😉

[@zaktreister1995]

Thanks King!

[@gagiksimonyan3782]

thanks for another useful video, Dmytro ;)

[@atmn_pawel]

do you have ngZone: 'noop" set in this demo ?

[@DecodedFrontend]

No, I didn't do that. Currently, signals work in the context of ZoneJs. A new CD mechanism will come in a bit later.

[@dennis87ist]

Hi Dmytro! In my application I declared a lot of variable as Observable. Can signals be used to replace Observable?

[@DecodedFrontend]

it depends :) Currently, there is a consensus that Signals are good for synchronous reactivity and observables are good for scenarios when you have to deal with async stuff e.g. events, http calls, etc. So I would say that it is better to use both.

[@oleksandrvorovchenko8674]

Thanks! Well done.

[@The14Some1]

13:34 the way you wrote this effect was very misleading and confusing. I was forced to check if it makes sense on preactjs myself.

[@XFuriousGamming]

This is great content. Keep it up!

[@nelson3391]

Thanks! Excellent content!

[@yufgyug3735]

does angular 16 still contain zonejs? if yes, what happens if we use this predicted api to convert signal to observable - does it trigger old change detection based on zonejs, or are we staying on signal based system, since underlaying values are emitted by a signal?

[@DecodedFrontend]

I can say for sure that zonejs will stay in the next major releases because migration and adoption of signals will take a decent amount of time. Regarding how it will work exactly I can't say now because this feature wasn't even pushed to the Angular repo yet :) I think things will become a bit clearer when the angular core team will publish the first RFC.

[@TuHoang-jt8lf]

It like a new Angular and I have to learn from scratch again

[@volodymyrusarskyy6987]

This is like a mix of old EmberJs and KnockoutJs

[@TravisSomaroo]

Great content!

[@michalwroblewskimobi]

KnockoutJS, we meet again

[@DecodedFrontend]

All new is well forgotten old 😄

[@evtihii]

Thanks for information. Still I didn't get the real experience of using signals. Long story short why we need it. It looks like a getter actually

[@Chantimedidi]

Bro can you please explain about component store?

[@alexandrefaustino2448]

So what is the actual peformance gain. So Signal do not need a | async pipe in order to be updated. ChangeDetectionStrategy will be remove ?

[@DecodedFrontend]

Yes. No need for an async pipe. ChangeDetectionStrategy flag will (most probably) become obsolete in the future. One of the reasons for performance gain will be that Angular will do Change Detection only for components where their data model has changed.

[@ilyabielov9864]

Дякую :)

[@TheoLeChnow]

great video thx :)

[@AlphaFrog1021]

wouldn’t accessing signal value with function call in template cause problems with cd?

[@DecodedFrontend]

No, it is fine to use signals like that. By the way, functions in the template are also safe to use unless those functions do some expensive computations, loops, etc

[@SheriffZmroka]

There are some really cool things in your videos. Have you thought about running courses on global platforms like Udemy? I found out about your channel by accident and I think they will be popular on Udemy.

[@DecodedFrontend]

Hi :) I actually hosted my courses on Udemy some time ago but I intentionally moved from there because Udemy has terrible conditions for course authors.

[@SheriffZmroka]

@@DecodedFrontend Hmm. Maybe then the egghead platform? Because the content is really good, and it needs to be popularized.

[@YehorKanaiev]

Це як async в компоненті. Але ось я не сильно розумію, як сигналом можна буде замінити RxJS. Там же так багато операторів. І скажімо observable зараз добре притосований для http запитів, коли можна купу кейсів покрити різними операторами. Скажімо можна було б зробити бібліотеку, яка б при створенні http запиту приймала 2 агрументи: сигнал і error колбек. Ця звязка була б легшою чим rxjs, але менш функціональна.

[@hfspace]

signals seem promising for sure, although i like my piped observables :-)

[@DecodedFrontend]

Fortunately, we can use both 😉

[@mehmeh533]

Love it!

[@_dinesh]

Thank you for the great video. I dont like the syntax.. signal, effect and compute it looks a little weird. Very react-ish..

[@rikizy528]

It looks similar to knockout binding

[@LeungWong]

The style of signal make Angular look kind of similar to React. signal would be similar to useState, and effect would be similar to useEffect. Technically maybe they are different thing, at least for signal. But the way of writing the code feels a bit React.

[@zhandosainabek]

And "computed" thing looks like VueJs :)

[@damiankowalski8541]

I feel the same way, except I think with signals you do not have to explicitly state the dependencies

[@ghkpr]

tldr, angular is now react?

[@ValeriiPetrenko-z6j]

Have been using Angular since v4 and Zone js was never been a real pain in terms of cd, I just turn it off by default with noop bootstrap option, thats it. The main flaw of using zone js in Angular is much wider and no one really talking about it, it is the fact that zone js initializing in browser swaps some native code functions with its wrappers and if Angular is the only app on the page it is not noticeable, but if there are more apps on the page with different technologies, plugins or microfrontends, then they all become using those patched functions, because they are share the same window api, even worse in scenario when some another app initialized its things with native code, then zone js appears and in the middle swaps window api and ZoneAwarePromise error could appear in sibling apps, etc. Even the fact that you developing some code modules relying on native api, testing it, then realize it is swapped in runtime with something different, somehow magically working indeed but it is not something what you expecting.

[@vishwajeetsavandkar7617]

❤

[@bornathepicek]

Why is Luka Doncic teaching me about Angular?

[@josemiguelochoa5372]

Yo.. When did Luka Doncic become a software developer 🤔

[@kumarvadivel4328]

this very much unwanted feature in angular. which complicates the understandablity metric of the framework

[@DecodedFrontend]

Thank you for your feedback :) maybe it is just a first impression😉

[@sergeymois6302]

Дякую за вашу роботу. Можливо вам буде в нагоді почути як нейтіви вимовляють слова process, mechanism .

[@unhandledexception1948]

annoying to see that angular is adopting a dumbed down react / vue style paradigms when it already had a superior approach to reactivity

[@stanisawgolinski3244]

Wait... it's look like Vue component xD

[@wenreloz]

Lol. 😂 You're right!

[@DecodedFrontend]

😬

[@skayona]

I was searching for this comment 😅

[@sabasojoodi6344]

Hello please set Persian subtitles for your videos 🙏

[@piotrbrokowski4703]

like in the blind

[@aaronkoller8811]

ExpressionChangedAfterItHasBeenChecked -- Ugh. Less of this is better for everyone!

[@DecodedFrontend]

haha, totally agree :)

[@juraganpisang6982]

goodbye subscribe hell observable

[@genyklemberg]

Say bye to newcomers, they are way far away from Angular now)))

[@DecodedFrontend]

Haha! Nah, things are not so bad :)

[@ravijsoni2477]

It's not a big thing. It's built on top of Reactive Extensions Library for Js. Anyone can create their own custom signals. LOL

[@МаксимКобєлєв-у1р]

Дякую! Слава Україні!

[@namename123]

You can update Angular to 16, even if the current latest version is 15? :O :O :O

[@DecodedFrontend]

Angular 15 is the last stable version but you can manually define any “next”,”beta”,”release-candidate” version 😊