Reactive Angular Course (with RxJs, Angular 22)

Explore building an Angular app in a reactive style by contrasting a traditional imperative home component with a planned reactive refactor, using HTTP client observables and RxJS.

Refactor the home component by creating a stateless, observable-based courses service that uses the HttpClient to fetch /api/courses and emits a course array via an observable, transformed with map.

Learn to consume observable-based services in Angular with the async pipe, derive beginner and advanced course lists using RxJS map, and prevent memory leaks by automatic unsubscription.

Discover how to prevent duplicate http requests in angular by using the rxjs shareReplay operator to cache and share a single http observable among multiple subscriptions, including the async pipe.

Understand smart versus presentational components in Angular by refactoring a course card list into a pure presentational component that accepts input data, while the home component handles service-layer data.

Refactor the app to a reactive style, demonstrating stateless data modification with an edit dialog, Http put saves, RxJs operators like shareReplay and tab operator, and reloading courses.

Explore how to enable decoupled, reactive communication between Angular components at different tree levels, using loading indicators and error messages panels to provide user feedback.

Learn to implement a decoupled loading indicator with a loading service in Angular, enabling components across levels to show or hide a spinner via dependency injection in a reactive design.

Demonstrates a reactive loading service design that exposes a boolean loading observable, provides on/off and showLoaderUntilCompleted methods, and uses the async pipe to control a shared material spinner.

Explain building a shared loading service in a reactive angular app to control a top-level loading indicator via a loading observable from a behavior subject, with on/off methods and finalize.

Finish implementing the loading service with show loader until completed, turning on the loading indicator at start and off at completion using a null value, tap, concatMap, and finalize.

Use the providers property to give the course dialogue its own loading service, creating a separate loading indicator and binding it to an observable with show loader until completed.

Learn to implement a reactive error messages panel in an Angular app, with a closable, full-width red panel that displays errors from multiple sources via a shared observable service.

Implement an observable-based messages service to display errors with the showErrors API, use catchError to log errors to the console and surface messages, and terminate the stream with throwError.

implement the messages service and messages component to display error messages using a public showerrors api and errors observable built from a behavior subject, with template integration and demo.

Learn how to implement local error handling inside an Angular Material dialog by introducing a dialog-scoped messages service, using RxJS catchError and throwError to display user-friendly errors.

Learn when to add state management in Angular apps by comparing stateless data flow with http requests and the async pipe, and weighing user experience against network overhead.

Learn to implement a store service in Angular 20 that manages in-memory data with RxJS, exposing a courses$ observable and a filter by category method for beginner and advanced courses.

Develop a courses store using a private behavior subject to emit course arrays as an observable, load courses from the backend, and handle loading and errors with a messages service.

Expose a new save course API on the behavior subject store to perform optimistic in-memory updates, emit changes via the courses observable, and persist in the background.

Implement an optimistic save in a behavior subject store by updating in memory, emitting the new courses via the courses observable, and saving in the background with http put.

Explore front-end authentication state management by building a centralized authentication store in Angular, exposing user, isLoggedIn, and isLoggedOut observables, plus login and logout methods to manage the user profile.

Implement an authentication store that emits user profiles on login, persists them to local storage, and exposes is logged in and is logged out derived from a private user stream.

The lecture demonstrates wiring the authentication store to login and logout, showing/hiding login and logout buttons based on is logged in/out observables, and navigating to courses on success.

Enable the authentication store to survive browser refreshes by saving the user profile in local storage as JSON and emitting it on startup.

Discover the master detail user interface pattern with local memory state management to render search results in a table and display a detail view without contacting the back end again.

Implement a master-detail search screen by wiring a search input to a backend via a courses service, returning an observable of lessons and displaying results in a master table.

Implement a master-detail flow in the search lessons component by tracking the active lesson; clicking a result opens the detail view, and back to search resets the state.

Finish the master detail implementation with presentational lesson detail, pass data via input, embed youtube with a safe url, and manage state at the component level without centralized state.

Convert the course and lessons to observables, fetch the course by id from the URL via the activated route, and render title, description, thumbnail, and lessons with the async pipe.

Add a load all course lessons method to fetch lessons for a course via http and expose them as an observable of lesson array, then render with the async pipe.

Learn single data observable pattern in Angular, replacing multiple observables with one data observable that combines course and lessons using combineLatest, enabling the template to display data as it arrives.

Apply the single data observable pattern to show course data as soon as available, using startWith and combinedLatest. Improve user experience by hiding the lessons table until data loads.

Refactor an Angular reactive app from default to OnPush change detection to boost performance. Learn to push data via input properties and observables with the async pipe, enabling selective rerendering.

Learn to build mostly stateless reactive Angular apps with observables and the async pipe, and apply lightweight state management for enterprise apps. Explore smart and presentational components and decoupled communication.