Angular Signals In Depth (Angular 22)

Implement a full CRUD workflow with signals in Angular, reading, creating, updating, and deleting a course via a real REST API.

Discover how to build Angular apps with RxJS optional by using signals as the primary reactive primitive and reserving RxJS for complex orchestration, and learn interoperability between signals and RxJS.

Implement the read operation in angular signals by displaying a courses list in the home component, loaded via a promise-based load all courses method from the injected service.

Explore two options for Angular HTTP service layers: using fetch with promises and async/await, or using the Angular HTTP client to return promises instead of observables, avoiding RxJS.

Inject the courses service and fetch all courses using async/await with try/catch error handling on the promise-based API, updating the courses signal from backend data.

Explore alternative data loading approaches in angular signals, moving code from the constructor to ngOnInit or afterNextRender. Both methods load data when a component is created, offering equivalent practical options.

Learn to use the Angular http client with a promise-based service layer and async/await, converting observables with first value from while leveraging interceptors and testing.

Define two derived signals from a private courses signal using the angular signals computed API to create beginner and advanced courses for display in the home component tabs.

Define a course card list component using angular signal inputs, specify required inputs, and explore alias and transform options while binding beginner and advanced course signals in the home template.

Learn to display and sort a dynamic list of courses using Angular signals, building a course card template with title, image, description, and view, edit, and delete actions.

Continue implementing the full crud service layer for courses using fetch, supporting create, save, and delete operations with async/await, returning full course objects from the backend.

Implement the crud service with the angular http client, converting observables to promises via first value from and using async/await to support load, create, update, and delete courses.

Open the edit course dialog via Angular Material to update a course, send changes to the back end, and refresh the screen to display updated data.

Implement a reactive edit course dialog in Angular by injecting dialog data, building a form with FormBuilder, and patching initial values for title, long description, category, and icon URL.

Implement a save flow that sends a PUT request to update a course, handles errors, and closes the dialog with the updated course for UI update.

Update the ui after saving a course by emitting a course updated event from the course card list, then update the in memory courses signal in the home component.

Implement the crud delete operation by wiring a delete button to emit a course id, then remove the course from the list after a backend call.

Implement the create course flow in Angular signals by using the edit course dialog in create mode, a dialog service, and a back-end create call, updating the UI via signals.

Learn to build a signal-based loading indicator in Angular, using a shared loading service to control a reusable component across the app and hook it into HTTP requests and interceptors.

Implement a loading indicator using angular signals with a shared signal service injected across the app. Expose a read-only loading signal and a private writable signal via the service.

Implement a loading indicator with a functional angular http interceptor that turns on before requests and off after completion. Configure it to apply to all http calls with optional opt-out.

Explore using an HTTP context token to skip the loading indicator for specific HTTP requests, bypassing the interceptor when needed while preserving default loading behavior for other calls.

Implement a signal-based shared messages service to display error messages without relying on alerts, enabling cross-component communication through a messages component and a message model with severity.

Inject the shared message service and create a message signal to display and style alerts by severity using NgClass, with a close action to clear the panel.

Demonstrates implementing and using a messages service to display error, info, warning, and success messages across the app, including injecting the service, updating the UI, and handling errors.

Implement a signal-based authentication using a shared service to expose the user profile across the app, store it in local storage, and protect user interface elements based on login status.

Build a reactive login form with email and password, using the form builder; authenticate, share the user profile via a shared signal service, and display errors with a messages service.

Create a signal-based authentication service that emits a user profile or null, exposes isLoggedIn and a read-only user signal, and authenticates via /api/login with a home page redirect.

Adapt the UI to the user authentication status using signal-based authentication. Inject the authentication service to propagate the user profile, toggle login/logout, and conditionally render buttons across the app.

Implement logout by invoking the authentication service's logout method, erase the user profile by emitting null on the private signal, and route to /login using the router.

Save user profile in local storage to survive browser refreshes by detecting updates with a signal effect, loading on startup, and clearing on logout.

Implement a signal-based authentication guard to restrict access to courses screen, redirecting unauthenticated users to login page. Apply the guard to routing and preserve user state across refreshes.

Learn how to use model inputs, a writeable signal that enables two-way binding between a parent and child component, demonstrated with a course category combobox and value model input.

Explore two-way data binding with a writeable signal as a model input between a parent and child component, via a course category selector, and compare model versus plain inputs.

Fix dialogs by returning early when no new course emits after cancellation. Apply optional chaining for a default category to prevent errors as you continue.

Build the view course page with angular signals and router configuration. Define a course signal and a lessons array signal, then render header and a lessons table in the template.

Continue implementing course component by filling title from course signal, displaying thumbnail, and looping through lessons from lesson signal to render description and duration with tracking function by id.

Implement a course resolver using the router to fetch a course by ID, then populate the course signal before navigation, avoiding flicker with loading indicators.

Implement the load lessons method in the lesson service to fetch lessons for a course from the backend, using an http client with optional course id and query parameters.

Implement a course lessons resolver to fetch lessons by course id with a lesson service, injecting the resolver and exposing data through route data.

Learn to implement a master detail UI pattern using signals, building a master list and detail view with search, selection, and mode switching between master and detail.

Implement the master part of a master-detail view by building a header search form and results table driven by the lessons signal, with enter key support and on search actions.

Explore Angular signal queries with view child, querying inputs, components, and directives from templates. Learn to type signals, and use read parameter to return element ref, and handle optional matches.

Learn how the ViewChildren signal query returns multiple elements from a loop, similar to ViewChild, and how to declare, query, and read element refs or components with a read config.

Examine how content projection enables configurable components and use content child and content children to query projected elements, such as a title, with element references, in the master-detail scenario.

Implement the master-detail flow by loading lessons via the lesson service, displaying them in a master table, then switching to a detail view with back navigation and signals-driven updates.

Finish the master detail implementation by saving lesson changes to the database and updating the master table in memory, using the lesson service, messages service, and RxJS signals.

Learn RxJs interoperability by converting a signal to an observable and vice versa, using two observable, with emphasis on dependency injection context and avoiding memory leaks.

Demonstrate how two observable converts a signal into an observable using a signal effect, and explain how change detection triggers only the last value emitted.

Convert an observable to a signal using the toSignal interoperability utility, and manage its lifecycle with the injector to prevent memory leaks, while using an effect to inspect emitted values.

Explain how toSignal handles initial value and requireSync with an interval observable, showing startWith to provide an initial value and warning that both options cannot be used together.

Explore how to signal error handling from a source observable, using catch error, try catch, and the reject errors option, with a back end courses observable as a case study.

Discover how linked signals create writable values from source signals using a computation function. Learn when to use linked signals over computed for cases like resetting a course quantity.

Angular resource API handles asynchronous requests using signals, enabling declarative data loading, cancellation via abort signals, and loading indicators in a search UI.