Modern Angular With Signals - The Missing Guide

Learn how to code in Angular using the new feature: "Signals", Use the new best practices while avoiding the pitfalls

What you'll learn

Learn how to develop in Angular using Signals

Learn how to avoid the pitfalls of the signals feature

Learn how to develop in angular using the newest best practices

Understand how change detection works and what is a zoneless application

Learn common patterns that will simplify your application structure

Angular just got much easier - learn how to take advantage of it

Learn the new signal based API of angular

Requirements

Prior basic experience with Angular

Some Typescript, HTML and CSS - advantage

Description

Master Angular Signals: Modern Change Detection and Zoneless ApplicationsUnlock the full potential of Angular's newest feature—Signals. This course begins by explaining the motivation behind signals, diving into the fundamentals of the event loop, tasks, and how zone-based change detection works. You'll discover why Angular is shifting towards zoneless architectures and the challenges posed by using RxJS and push-based change detection in large-scale applications.We then introduce the basic primitives of signals, including their relationship to injection and reactive contexts. You’ll learn how to work with writable and computed signals, and how to implement effects and handle RxJS interoperability. These foundational concepts will help you start using signals effectively in your applications.Once the basics are covered, we dive deep into how signals are implemented under the hood to give you a more advanced, intuitive understanding of their behavior. This deep understanding of how signals and injection contexts work will help you avoid the pitfalls of this seemingly simple feature, enabling you to use signals effectively and confidently.Angular 18’s new signal-based component API is a game-changer for modern Angular development. In this course, you’ll learn how to integrate signals directly into your components, significantly improving performance and reducing complexity. We’ll explore how the deep understanding of signals and injection contexts is essential to mastering these APIs and avoiding common mistakes. With this knowledge, you’ll be able to build more efficient, responsive, and scalable components that take full advantage of Angular’s latest features.Moving beyond components, we dive into building signal-based services, which offer a powerful, scalable solution for real-world Angular applications. The course concludes with a comprehensive hands-on practical example, allowing you to apply everything you've learned throughout the course.Whether you're a beginner looking to understand signals or a seasoned Angular developer seeking to deepen your expertise, this course provides both theoretical insights and practical knowledge. By gaining a deep understanding of how signals work, you’ll gain the confidence to build efficient, scalable, and future-proof applications while avoiding common pitfalls.

Overview

Section 1: Introduction to the course

Lecture 1 Introduction

Lecture 2 Course Outline

Lecture 3 How to practice in this course?

Section 2: Why would we want to use signals?

Lecture 4 Section Introduction: Why would we want to use signals?

Lecture 5 Angular Default change detection and OnPush

Lecture 6 Invoking change detection when in the OnPush strategy

Lecture 7 Try it yourself - Change Detection

Lecture 8 Change Detection and ZoneJS

Lecture 9 Performance of Automatic Change Detection

Lecture 10 Understanding the async pipe and how it works

Lecture 11 Try it yourself - Using async pipe with push change detection

Lecture 12 RxJS State management challanges - Part 1

Lecture 13 RxJS State management challanges - Part 2

Lecture 14 Zoneless applications and the future of Angular programming

Section 3: Introduction to signals

Lecture 15 Section introduction - Welcome to signals

Lecture 16 Creating writeable signals

Lecture 17 Modifying a writeable signal

Lecture 18 Creating computed signals

Lecture 19 Try it yourself - Writeable and Computed Signals

Lecture 20 Reacting to signal changes using Effects

Lecture 21 Try it yourself - Effects

Section 4: Deep Dive into signals

Lecture 22 Introduction: How do signals work?

Lecture 23 DestroyRef, inject() and Injection Context

Lecture 24 Injecting Dependencies when not in Injection Context

Lecture 25 Signals and Injection Context

Lecture 26 Try it yourself: Signals and Injection Context

Lecture 27 Understanding Reactive Context

Lecture 28 Reactive Contexts and Effects

Lecture 29 Interoperability with rxjs

Lecture 30 Interoperability with rxjs - part 2

Lecture 31 Try it yourself: Converting observables into signals and vice versa

Lecture 32 Signals and Immutability

Lecture 33 Try it yourself: Immutable updates

Section 5: Angular Signal based API

Lecture 34 Introduction to modern angular using signals

Lecture 35 Functional programming in Angular

Lecture 36 The input function

Lecture 37 Try it yourself: Signal inputs

Lecture 38 The output function

Lecture 39 Model inputs

Lecture 40 Try it yourself: The output and model functions

Lecture 41 Signal based View queries using viewChild and viewChildren functions

Lecture 42 Timing of signal based child queries

Lecture 43 Signal based contentChild and contentChildren

Lecture 44 Try it yourself: viewChild and contentChild

Lecture 45 HostBinding and HostListener in signal based apps

Lecture 46 Binding router data to component inputs

Lecture 47 Try it yourself: Binding router data into inputs

Section 6: Signal based services

Lecture 48 Introduction to signal based services

Lecture 49 Stateful services using Behavior Subjects

Lecture 50 Holding the state in signals

Lecture 51 Exposing writeable signals as read only

Lecture 52 Adding computed signals

Lecture 53 Consuming the service in the components

Lecture 54 Updating State - Synchronously

Lecture 55 Triggering APIs using RxJS Interop

Section 7: Summary

Lecture 56 What we have covered

Lecture 57 What's next?

Lecture 58 Final words

Beginner Angular developers who would like to advance to the next level,Software architechts looking for a simple consitant pattern for a complex application