Modern Angular 22 with Signals - The missing guide

Explore why we need signals by examining Angular's change detection, the role of zone.js, and the trade-offs of bypassing detection with RxJS before introducing signals.

Practice change detection with interactive Stackblitz projects, open devtools to inspect dom, and try onpush change detection by injecting change detector ref and calling detect changes to see ui updates.

Discover how the async pipe extracts observable values, triggers change detection automatically, and simplifies onpush change detection versus manual change detector handling in Angular.

Explore RxJS state management challenges with BehaviorSubject and derived values, using combineLatest to reflect the selected color, and solve transient inconsistency with debounceTime before map.

Explore RxJS state management challenges with two behavior subjects a and b and a derived sum$, and why ngrx and signals offer simpler, robust state handling in Angular.

Explore zone-less change detection in angular 18 using the experimental provider to remove zonejs, and apply onpush across components. See how signals replace behavior subjects for simple stateful services.

Explore the basics of signals, reactive data structures that notify changes. Create a writable signal, derive computed signals, and react with effects to understand how to use them.

Explore signals as simple writable boxes created with the signal function, unlike subjects, read by calling the signal, and bound in HTML with zone-less change detection.

explore writable signals created with the signal function and updated by set or update, then learn computed signals as read-only, derived from signals via expressions and caching.

Learn how effects respond to changes in writable and computed signals, with automatic subscriptions, batching, and safe patterns for asynchronous code and side effects; avoid modifying signals inside an effect.

Discover the linked signal, a writable and computed primitive in Angular 19, with the reset pattern to keep a selected product synchronized with a changing inventory, avoiding infinite loops.

Explore how signals are built and how they work, including limitations and best practices. Investigate Angular injection, injection context, reactive context, and how signals interoperate with RxJS for data immutability.

Explore how Angular 14’s inject function and Angular 15’s DestroyRef manage subscriptions and prevent memory leaks by unsubscribing on destroy, using injection context correctly.

Explore injecting dependencies in angular 20 with signals by handling startCounting in or out of injection context, using inject, DestroyRef, and runInInjectionContext with a reusable injector.

Explore how signals integrate with injection context by using effects tied to an injector and destroy ref, enabling controlled start and stop of a counter with a go button.

Discover how reactive context in angular watches signals and auto updates dependent code. Avoid side effects and creating signals inside reactive context; use effects for logging, rendering, or local storage.

Explore how effects work with signals in Angular's reactive context, including computed usage, avoiding writes in effects, and NgRx signal store as a practical solution.

Learn how to blend Angular signals with RxJS by converting signals to observables and back, using switchMap for asynchronous API calls, and handling initial values and reactive contexts.

Show how to observable converts a signal into an observable with an effect and replay subject, and how to signal updates a signal from an observable with optional injector.

Explore how Angular adopts signal based functions, replacing decorators and hooks, and master inputs, outputs, model function, two-way data binding, view or content child queries, and router features.

Explore how modern Angular adopts functional programming with signals and the inject function, enabling type-inferred, function-based router guards, interceptors, and signal-driven inputs, outputs, and queries for cleaner code.

Learn how Angular 18's input function makes input properties reactive signals, enabling computed values without lifecycle hooks and enabling fine-grained change detection with on push change detection and zone-less application.

Explore Angular's model function to enable two-way binding between parent and child components using signals, replacing form controls with writable inputs and the banana in a box syntax.

Practice implementing communication between the app component and the option selector using inputs, outputs, and models by working with the provided project link in Stackblitz or locally.

Understand the timing of signal based child queries in Angular, including after view init value availability and why effects run after lifecycle hooks for safe access.

Practice viewChild and contentChild with signals to locate inputs by view and content queries, and learn to use elementRef, native element, appManaged directives, and host binding and host listener.

Bind router data to component inputs with Angular's router input bindings, convert id strings to numbers via a transformer, and switch from observables to signals and computed values.

Develop hands-on skills binding router data into inputs by implementing a name details view that reads the route parameter and derives two computed signals: uppercase name and name length.

Learn to manage state with signal based stateful services by dividing into core writable and derived computed parts, exposing writable state as read-only, and using RxJS for asynchronous updaters.

Build a stateful service to manage the quiz current state, including questions, answers, and progress, using Angular signals for reactive updates and to reduce boilerplate and manual subscriptions.

Define a stateful exam service using signals to hold questions and user answers, with derived state like current question, completion status, and score computed from core state.

Inject the exam store into the app component and consume its signals to drive app progress, current question state; render app done when finished, else present the app question presenter.

Trigger asynchronous API calls by using signals with RxJS observables to generate exams by difficulty level, cancel outdated results, and manage a busy indicator.

Explore Angular 20 resource APIs, including the HTTP resource and linked signal, through a real-life scenario and best practices for managing asynchronous data.

Explore Angular 20 resource APIs by building an empty app and using the resource function with a promise-based loader to load a value into a signal.

Reload a resource by triggering its reload method to re-invoke the loader function, producing a new promise and value, while states like loading and reloading ignore concurrent requests.

Learn to add cancellation to promise-based resources using an abort signal, since promises lack cancellation. Pass the abort signal through loader options and respond to abort events to cancel requests.

Practice implementing resource functionality in an application that already contains the entire UI, displaying its value and status, showing a busy indicator, and enabling reload and abort signal handling.

Explore resources with parameters in Angular 20 with signals. Bind a source signal to params property, triggering an asynchronous loader that multiplies by five and shows loading and abort behavior.

Explore resources with params by adding a params property and updating the loader to send param value to the API that multiplies by five, using the abort and source signals.

Practice error handling by inspecting the console to diagnose a failing UI at value 57. Learn to display errors in the UI instead of crashing, following the instructor's guidance.

Code along to build the books store app with a client and server. Replace fake data with live server data using a stateful service and signals to drive loading indicators.

Create a stateful service to manage the app's state and asynchronous operations, define the API base and WebSocket base URLs, and inject the service into components for shared reactive state.

Implement asynchronous search with resource signals by fetching books via fetch, handling promises and abort signals, and exposing read-only search results for a responsive angular 20 app.

Explore httpResource in Angular 20 with signals to fetch data via http client, encoding parameters, and returning a books array, with experimental status.

Learn how to read a selected book using Angular 20's rxResource and HttpClient, building an observable-based resource that handles empty ids, streams results, and cancels prior requests automatically.

Learn to stream data with rxResource by switching from promises to observables, using a WebSocket observable to deliver live stock updates and automatic cancellation on unsubscribe.

Explore how Angular 21 introduces signal forms, delivering full form reactivity with schema validators, cross fields validations, and multi field validations, and support for nested forms and form arrays.

Code along with me to build signal forms in Angular 21, connect a writable signal model to the form, and run projects locally or via StackBlitz.

Explore how signal forms automate state management in Angular by creating a form object with the form function. The writable signal serves as the source of truth, replacing manual controls.

Wire the field tree to the UI with the form field directive in Angular form signals, enabling type-safe, two-way binding between the model and inputs via writable signals.

Study how to build a form validation schema with signal forms, using a path-based approach to set required fields, email format, and min-length rules for username, email, and description.

Explore how field trees and field states model UI state in signal forms, and how to conditionally apply the invalid css class when a field is invalid.

Show how to present validation state in the UI using a form's state and signals, toggling an invalid class based on field state and touched status.

Learn to globally apply conditional CSS classes for form controls using provideSignalFormsConfig in Angular Forms Signals, restoring reactive forms behavior with ngStatusClasses or custom Invalid rules.

Learn to display multiple validation errors in a reactive form using a schema-driven approach, where errors are an array with kind and message, and messages can be computed with signals.

Create custom validators in Angular forms signals using the validate function, count words instead of characters, and return an error when the description has fewer than ten words.

Apply conditional validation in Angular 21 with signals by making email required only when the user role is not author, using the when option and value of path.role.

Explore cross-field validation by making thresholds depend on another field's value, such as author needing at least ten words while user or chef require five, using context and signals.

Explore cross-field and tree validation in Angular signals forms by using validateTree to attach errors to multiple fields, such as rating and recommendation, ensuring conflict rules are enforced.

Learn to conditionally disable or read-only the email field in an Angular forms schema using signals, with when context based on role, and plan removal for authors.

Explore how to conditionally hide fields in Angular forms using signals, and distinguish validation behavior for read-only, disabled, and hidden fields while updating the UI accordingly.

Build nested forms by adding two subforms for food and service, each with rating and recommendation, and learn maintainable form structures with reusability and signal forms.

Validate nested forms by applying rating constraints inside nested paths, enforcing values between 1 and 5 with clear error messages, and learn to reuse code before form arrays.

Learn to work with form arrays in Angular by looping over review items and binding each to a subform. The aspect field replaces hardcoded titles, enabling lists and add-remove support.

Add and remove items in the reviews array by updating the model immutably, replacing the array with a new one, and using per-item remove buttons with signal forms.

Validate a form array with apply each to enforce rules on every item, including min/max rating and required aspect, plus cross-field checks. See how nested validation controls form submission.

Signal forms extend the form lifecycle to include the submission phase, representing progress and errors, preventing double submissions, and guiding users from submission to success or failure.

Learn how to submit a signals form with the submit function, using a root field tree and an action, or switch to a form tag with form root and type=submit.

Learn to handle invalid forms on submission with signals, manage nested validation errors via error summary, auto focus the first invalid field, and use on valid for alternate actions.

Explore submitting state in Angular with signals: simulate a four-second async submit via a review service, show submitting UI, disable the entire form, and display a success box on completion.

Explore how signal forms return server validation errors as a tree validation result, mapping field-specific errors from the review service and handling success as null.

Create a reusable field wrapper component in Angular with signals that wraps input controls with a label and optional errors or asterisk indicators.

Make the field wrapper automatically display errors by using content child to access the field directive and derive the field state and errors with computed signals.

Create a reusable sub-form component for editing ReviewItem objects. Drive the sub-forms with a reusable field tree input and header input, using signals to update the parent form.

Create reusable schemas for form sections using Angular signal forms, applying a review item schema to specific paths for centralized validation and reduced code duplication.

Explore how fields carry metadata in Angular 21 with Signals, showing how built-in validators attach min and max metadata to field state and enable range inputs without extra attributes.

Create a custom star rating control using signal forms in Angular 21, leveraging Material Icons, computed signals, and two-way binding to replace native inputs with a field editor.

Implement a form value control for a custom field editor using a value model signal, and exposing optional min and max as inputs from the schema.

Discover how signal forms store custom validator metadata and expose it through field state, enabling minimum word thresholds to be read, displayed as hints, and reused across validators.

Explore signal forms in Angular 21, using schema-driven metadata and validators to move logic from templates into reusable directives and components for modular, maintainable forms.

Review the complete course coverage of angular signals, from basic signal creation and effects to RxJS interop and the new signal based APIs, including signal forms, resources, and state management.

Explore next steps after mastering signals, including state management with signals-focused libraries like NRW signals for complex real-life scenarios, and handling asynchronous API calls with RxJS when signals fall short.

Celebrate completing the course by applying Angular 20 with Signals techniques through practical exercises and real-life projects, and keep learning by practicing and seeking feedback.