Getting started with Angular Signals
ฝัง
- เผยแพร่เมื่อ 9 พ.ค. 2023
- Introducing Signals, a new reactivity model in Angular. Signals equips you with high quality tools for fine-grained reactivity,
while setting you on a well lit path and providing you with guardrails to make your app performant. Learn how to start exploring the developer preview in Angular v16 today.
Resources:
Getting started with Signals → goo.gle/41T99yl
Signals Request for Comments →
Angular Twitter → goo.gle/3zyIA4Y
Speakers: Emma Twersky, Alex Rickabaugh
Watch more:
Watch all Angular Sessions → goo.gle/IO23_angular
Watch all the workshops from Google I/O 2023 → goo.gle/IO23_workshops
Watch more Web Sessions → goo.gle/IO23_web
All Google I/O 2023 Sessions → goo.gle/IO23_all
Subscribe to Angular → goo.gle/Angular
#GoogleIO - บันเทิง
Watch all the Angular Sessions → goo.gle/IO23_angular_pin
I know they were called previously `SettableSignal` but since they are called `WriteableSignal` now (which I like more :thumbs_up: I think they should have the method `.write(value: T)`. This would make Kevlin henney also super happy to see less "sets" and "gets" in every code base.
The most complicated example to learn signals on the internet
agreed
lmao you're right. The simple counter would have been fine
The only thing I hate about angular is that I'm obliged to use it at my job...
Well, it was created by people who write documentation. It explains everything. Compare React or Vue docs with Angular docs.
Clearly, I was like "wtf, a cipher game really?..."
Exactly how I imagined the people responsible for Angular!
naaah 💀
bro
Turns 2/3 towards PashaSemf, in scripted excitement: "Now that is a marvellous observation!" - displays NaturalSmile_3.
the Example Application is pretty complicated. I Joind the other commentators mentioning to use simple Examples to explain the concepts of signals.
Skill issue.
@@Ryval_OW Expected response from a Widow main
Example should be simple to understand.
Not sure why you choose complex examples.
Loved the video! 🥳 a really awesome demo!
Greatful !
thanks Angular Team 👍
Its just like behaviourSubject but less verbose. I like it
yeah no neeed to subscribe, unsubscribe and change value with next()
You both are here to confuse folks 😂😂. I love how Mark Techson explains this on Frontend Masters. I watched the video because of her.
Wow really interesting!
as i just started to work with angular again after 2-3 years of pause, i dont quite get the difference between two-way-bindings and signals as you can just pass the value and it will be shown on the UI when updated. other than that using behaviours also would do the job to track on some values, sharing with services is also possible..
I liked it.
Too complex example for simple things
so the main difference to behavioursubjects is, that you dont need the subscribe stuff and you have less sideffects like with multiple subscriptions and chaining pipes on one subject?
This was my takeaway. Behavior subjects, but without all the code gymnastics and memory leaks involved
thanks @matthewcullum7551, I was wondering about the difference between BehaviorSubject and signals
Can we use signals with forms? How signals will be integrated into Form Builder?
Nothing published yet, though you can soon use signals for 2 way data binding. Reactive forms will still need quite some time. Most likely we with some something with Angular 18.
This is their replacement for observables... got it!
It isn't a replacement. Signals are synchronous only. Rxjs also has loads of operators. This is why I'm sticking with rxjs.
This example... oh my god 🤦♂
Thanks for this feedback, we're going to make more examples in the future.
Who ever came up with this example idea, did not want for people to fully understand the signals.
Hi, thanks for the video.
Two things:
- when using stackblitz, please dont use inline template because of missing code highlighting.
- in effect, please dont use var keyword to declare a internal variable. Use const in this case.
Another things that dont see an answer for:
- signals beside replace zone.js, will it replace also ngModel directive or banana in the box ?
- What about forms, mainly template driven forms?
thanks.
Hey there. Banana in a box will remain, though implementation will change a little. As 2 way data binding will be expressed as a writable signal (google for for signal components rfc angular github)
Ng modules will remain. Though usage will most likely get less and less. There have been no stated plans to remove them.
Regarding forms, nothing has been published yet. They will most likely work on that jn Angular 18.
My oh mine, is this the intro video? What would the advance be like?
My team decide to not update to angular 16 because Signals are still in development mode and not ready yet for production, is that true?
Angular Signals are in a Developer Preview.
This means that the features are there, they are fully functional and pollished but the API might change in next versions.
I mean you can still upgrade to angular 16 and your application should work just fine, because signals haven't replaced anything yet. The signals are part of the developer preview and shouldn't be used in productive environments at the moment.
@@Tobawa2601 Yhea i know my team is retarded I ask to leave :)
If you don't use them it's like they don't exist. Just update
like the example provided, the video is equally complicated to decipher! Such examples should not be for the introduction of a concept!
why dont you take very simple example?...
Is this example really necessary?! No hate, but it is pretty difficult to understand. 😒
Thanks for this feedback. We're releasing some new examples soon!
How this is different from BehaviourSubject ???
You cannot compute a BehaviorSubject.
It's sync always.
Also, computing a new value from a BehaviorSubject is imperative, unlike signal which is reactive.
Hi,
just a simplification:
RxJS is an async reactivity where signals are sync reactivity.
@@vkagklis Signals are not for the Devs , Signals are for the Compiler (CD)!
We already have rxjs Subjects to multicast data
Feels like a kids video. vibes so fake
Well this happens when a company has too much money so simple 5 minute screencast video gets so many editions that it turns into a material that looks like it was made for 6 year olds. :(
Not to mention the overcomplicated framework.
A simpler way to explain this is to say: a signal is a useState in react and an effect is a useEffect in react 😊
Good job though (really)
have to say this is tutorial is so horrible
Can use effects to emit signal values instead of calling the emit in multiple places?
effect(() => {
this.exampleSignalChangeEvent.emit(this.example_signal());
});
that document.getElementById in Angular hurts my eyes :D
var result = compute(() => info.max() + cringe.max())
Greatful !
thanks Angular Team 👍