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.

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 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.

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.

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.

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.

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.

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.

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 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.

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.

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.

Apply conditional validation in modern Angular 21 with signals using the when option to enable the email required validator only when path.role is not author.

Use cross-field validation by making a threshold depend on another field, such as author vs user roles, with automatic reevaluation via a reactive context.

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.

Learn to validate nested properties with Angular form signals by applying min and max to path.food.rating, with clear messages; the session also previews moving toward reusable validation and 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.

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.

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 have metadata in signal forms, where the schema defines min and max ranges and UI controls auto-sync with data constraints, enabling dynamic, metadata driven UI without html 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 how signal forms use schema-driven metadata and validators to define labels, hints, and constraints, enabling modular, maintainable forms in Angular 22.

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.