Welcome to the Angular Signals Course, your hands-on guide to mastering the new Signals API in Angular. This course covers all the core concepts you need to build fast, reactive, and maintainable applications using Signals for state management and change detection.
🚀 Ideal for Angular developers who want to modernize their stack and move beyond traditional RxJS patterns.
Prefer video learning? Follow along with our free video course on YouTube. The videos are in Spanish 🇪🇸 with optional subtitles, so learners from any background can benefit.
📺 Watch the Angular Signals Video Course on YouTube
Each lesson corresponds to a folder inside src/app, named numerically (00, 01, 02, etc.) for clarity and sequential learning. You can explore each example independently or follow the suggested order.
| # | Lesson Description | Code Path | Video |
|---|---|---|---|
| 00 | Intro to Change Detection | src/app/00-change-detection |
Link |
| 01 | Writable & Readonly Signals | src/app/01-counter-signal |
Link |
| 02 | Computed Signals | src/app/02-counter-computed |
Link |
| 03 | Effects and Side Effects | src/app/03-counter-effect |
Link |
| 04 | LinkedSignal API | src/app/04-linked-signal |
Link |
| 05 | Input/Output with Signals | src/app/05-input-output-signal |
Link |
| 06 | Two-Way Binding with Signals | src/app/06-double-data-binding |
Link |
| 07 | Querying Components with Signals | src/app/07-queries-signal |
Link |
| 08 | Router Integration | src/app/08-router |
Link |
| 09 | Async Patterns and Fetching Data | src/app/09-async |
Link |
| 10 | RxJS Interop | src/app/10-rxjs-interop |
Link |
| 11 | Signal Forms | src/app/11-signal-forms |
Coming soon |
Follow these steps to run the course locally on your machine:
# 1. Clone the repository
git clone https://github.com/your-repo/angular-signals-course.git
# 2. Navigate to the project folder
cd angular-signals-course
# 3. Install dependencies
npm install
# 4. Start the development server
ng serve
5. Open your browser and navigate to `http://localhost:4200`.- You can jump to any lesson directly via the browser URL or app navigation.
- Each folder contains a
README.mdwith explanations and live code. - Follow the video series to see real-time examples and walkthroughs.
To deepen your understanding of Angular's reactive primitives, we offer a detailed comparative guide covering the core Signals API and experimental extensions. This guide explains their reactivity granularity, mutation capabilities, execution timing, typical use cases, and maturity status.
You can explore this comprehensive comparison and technical explanations in the markdown file:
📄 Angular Signal Primitives Comparative Guide
This resource will help you choose the right primitive for your specific state management needs and leverage Angular's full reactive power.
🎓 Happy learning!
If you find this helpful, consider starring ⭐ the repository or sharing it with your Angular community!
Are you interested in a live workshop, a tech talk, or a custom Angular training session for your team or event?
I’m available for collaborations, corporate training, conferences, and content creation opportunities related to Angular, modern web development, and software engineering best practices.
If you'd like to discuss a potential collaboration, feel free to reach out via the contact form on my website:
🔗 carloscaballero.io
Let’s build something great together!