Signals Unleashed: The Full Guide

Published 2024-04-04
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 for the project is at: github.com/rainerhahnekamp/signals-unleashed

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

The slides are available at: speakerdeck.com/rainerhahnekamp/signals-unleashed-…

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

All Comments (21)
  • @seawaywen
    You rock! fabulous work man, this is the most full detailed explanation I ever watched, thanks for the great content!
  • @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!
  • @israellucena926
    Fantastic, Rainer! A comprehensive overview of the signals API and beyond...
  • @jontaylor1586
    Thanks for this. Also, your audio is much better in this video than some of your older ones.
  • @dhavalv
    Absolutely awesome Rainer. A complete overview of signals API and more ...
  • @szabogergo2547
    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!
  • @az1nn
    Thank you for this course! Finally i could understand how to use Signals!
  • @aleksandrm3466
    That is amazing video. Thank you so much for sharing with us. Brilliant work!
  • @zygas15
    This video really great. Thank you for that!
  • @OlehBiblyi
    Just amazing explanation, thank you very much!!!
  • Great Job. Thank you for all the videos and articles you share with the community, it helps a lot.
  • @ahm2004ad
    It is great information. I can’t wait for the next video. 🎉🎉
  • @termobin
    I would like to congratulate you for the excellent work you did in this video, great explanations
  • @siebedom
    Great video, very clear explanation, thank you very well!
  • @leiayuri
    Thank you very much. It’s helped me a lot.😊
  • @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!
  • @davesharman8302
    Very nice video, I learned a lot from it that was very fuzzy before.