Local Change Detection in Angular is easy with Signals

In this video, you will see in a UI representation what the change detection looks like when an #angular application has a Default change detection strategy, what it looks like with OnPush change detection, and last but definitely not least what is the impact of a Local Change Detection.
You will also see how to handle the click events, and how the UI events affect our application using angular signals.
Chapters:
0:00 Intro
1:17 Default Change Detection Strategy
2:38 OnPush Change Detection Strategy
3:40 Local Change Detection Strategy
4:41 Handle the Click Events
6:37 Component Communication using Service
10:18 Thank you
✨ Repo:
github.com/profanis/codeShots...
🎉 CSS binary tree:
I followed the code from this codepen to generate the binary tree codepen.io/alvaromontoro/full...
******************************************************
Let's connect
******************************************************
Twitter: / prodromouf
LinkedIn: / prodromouf
#angular #learnAngular #angularTutorial #signals #angular17 #softwareengineer

[@ilirbeqiri253]

Great explanation there man. Thanks a lot ❤️ Just one thing that I noticed is that you call .update fn to update signal value but still extract the signal’s value itself instead of using the one provided by default from the update fn itself. Just mentionin for not causing confusion. Thanks again🎉🎉

[@CodeShotsWithProfanis]

ohh yeah. Thanks for that. It seems that I combined a syntax of set along with update :) The correct should be this.#counter.update((value) => value - 1); or this.#counter.set(this.#counter() - 1);

[@thomaslhomme6857]

Exactly what I was looking for. Thanks!

[@SebastianEcheverry-mp7ti]

this is really time saving

[@tarasshevchuk8477]

Thank you Fanis for very good explanation !!!

[@CodeShotsWithProfanis]

Glad it was helpful!

[@Nabulio85]

Great demo!❤

[@CodeShotsWithProfanis]

Thank you! 🤗

[@DraaElMizan]

Brilliant, can't wait for a full implementation of signals in Angular. Thanks for sharing Profanis. Please keep the tuts coming.

[@sergiokagiema9658]

Excellent example! Well done!

[@CodeShotsWithProfanis]

Many thanks! :)

[@georgespanos4680]

Awesome Fanis!!!

[@andersonantunes3287]

Excellent video, congrats. One more subscriber

[@CodeShotsWithProfanis]

Thanks!! :)

[@ansumanmishra9608]

Excellent tutorial ❤

[@CodeShotsWithProfanis]

Glad you liked it!

[@cdotforce]

Cool!

[@malikrajat]

Thanks sharing, It really a knowledge heavy video. I have request, Can you please share git repo for this code base

[@utsahpaikray]

Great

[@zaferdemir4680]

Great! How about new signal model? There is just a simple examples on angular dev. Can you please share on a new video complex signal model code base?

[@CodeShotsWithProfanis]

Thanks for asking. Indeed the Signal Model will be one of my next videos

[@andersonantunes3287]

I didn't know this way of obtaining the click event using `fromEvent` from `RXJS`. Is it possible to obtain the same result as `fromEvent` in relation to ancestral components using something native to Angular?

[@CodeShotsWithProfanis]

I would expect the Signal Components (they are not yet there), or a zonelss change detection would do the trick natively. This is the PR of the zoneless provider github.com/angular/angular/pull/55329

[@andersonantunes3287]

@@CodeShotsWithProfanis Thanks for the information, I'll wait for the new version to test