Signals Unleashed: The Full Guide

This video is your one-stop guide to Signals in Angular (as of 17.3). We'll dive deep into:

✅ Essential functions: signal, computed, and effect explained.
✅ Reactive Context: Understand where it lives and how to use it.
✅ Glitch-free effects: Why this behavior is a strength, not a bug.
✅ Angular's safety net: Learn how Signals prevent cyclic dependencies and manage side effects effectively.
✅ Signals vs RxJS: Uncover the reasons behind Signals and explore seamless interoperability.
✅ Component integration: Discover how Signals streamline communication, reduce code, and leverage better typing.
✅ Jump on the Signals bandwagon! With Angular's roadmap in mind, now's the best time to ditch the wait and start building cleaner, more efficient applications. ⏱️✨

The repository also has an "init" branch that contains the project as it was at the start of the video.

0:00 Introduction
2:49 1.1. Why Signals?
6:10 1.2. Application Walkthrough
7:22 1.3. signal()
15:58 1.4. Reactive Context I - Template
18:25 1.5. Two-Way Binding with Signals
20:14 1.6. computed()
25:01 1.7. Reactive Context II - effect()
30:02 2.1. Glitch-Free Effect or Push/Pull Algorithm
39:52 2.1. Animation Glitch-Free Effect
42:54 2.2. Dynamic Dependency Tracking
47:04 2.3. effect() updating Signals
51:28 2.4. untracked()
57:11 3.1. Why Signals when we have RxJs?
59:11. 3.2. takeUntilDestroyed()
1:03:46 3.3. toSignal()
1:07:06 3.4. toObservable()
1:08:30 4.1. Signals & ExpressionChangedAfterItHasBeenCheckedError
1:16:17 4.2. viewChild()
1:20:06 4.3. input()
1:23:52 4.4. output()
1:25:50 4.5. model()
1:35:17 5. Outlook & Summary

[jasondelorme]

Really thoroughly explains Signals with clear, relevant examples. Nicely done, thank you!

[seawaywen]

You rock! fabulous work man, this is the most full detailed explanation I ever watched, thanks for the great content!

[israellucena]

Fantastic, Rainer! A comprehensive overview of the signals API and beyond...

[nithin_bd]

Accidentally landed in this video. Now he's my favourite instructor. Amazing Rainer😍

[aznn]

Thank you for this course! Finally i could understand how to use Signals!

[larshanisch]

Thanks, that's exactly what I have to teach my team. Currently I experiment with various patterns to combine signals with async service calls. Chaining them is not yet very readable with toSignal/toObservable calls. It's not very "pipable". But we will see...

[szabogergo]

I am so greatful! I will share this with my team, so we can easily bring everybody to the same understanding of Signals pretty quickly! Thank you!

[jontaylor]

Thanks for this. Also, your audio is much better in this video than some of your older ones.

[devbuilddeploy]

What I found here just Gold, You can't ask better explanation this, thanks for great work you've done here.

[ChristianHanvey]

Fantastic content, brilliantly explained. I really appreciate the step by step changes and taking the time to explain why each error occurs. Master at work! Thank you for making and sharing this Rainer!

[dhavalv]

Absolutely awesome Rainer. A complete overview of signals API and more ...

[KaliaH]

Thanks for sharing - great content! My only point would be, you start going straight into coding with a project you created before the video. Would it be possible to get a GH repo that we can clone to code alongside you? I would like to build the app, too :)

[codigotipado]

Great video Rainer, all concepts well explained. I have also a course about Angular Signals in my channel but it's in Spanish with translations in English!

[DS-bzmz]

Great video!
It'll take a while for me to really understand some concepts, especially since we haven't been using Signals yet, and we've only just upgraded to v17. However, I'm excited about the future of both Signals and RxJS. :)

[aymensellaouti]

Great Job. Thank you for all the videos and articles you share with the community, it helps a lot.

[francobasilico]

Rainer, really good videos. Been following you for some time and enjoy your simple way of explaining.
If you can, do you have more videos about the signalStore and it extensibility? I use it a lot and I know how powerful it is, but would love to see more examples,

[zygas]

This video really great. Thank you for that!

[youpeekayey]

Sweet mama, fantastic stuff. Most in-depth guide in this topic that i found on yt. Thanks for this and keep up with great work! And subscribed ;)

[vutruong]

Thank you for the bombshell video Rainer!

While these Signal APIs vastly simplify how components/directives React to Changes, I feel that we still have not arrived at a good pattern for the Initialization phase of components/directives using Signal APIs.

Scheduling Initialization in constructor using the afterNextRender() seems to be the most sensible approach for me, with the added benefit of being SSR-friendly

I also tried setting up Initialization using effect() and untracked() but in the end it felt a bit "unsafe" because effect execution is asynchronously dependent on Change Detection Scheduling, which we have very little control over. I am also concerned about when the executed effect is itself an asynchronous fetch, like in your demo (the async search function).

ngOnInit, on the other hand does not have access to viewChild() and contentChild(), unless these queries are marked static.

Perhaps you can provide more insight regarding the advantages/disadvantages of the above approaches in future videos, when best practices emerge!

[termobin]

I would like to congratulate you for the excellent work you did in this video, great explanations