Angular and NgRx - Building Real Project From Scratch

Implement a register page and standalone register component within an auth feature, wire app routes with lazy loaded register routes, and validate input to redirect to the feed upon success.

Builds a register page in Angular using reactive forms, form builder, and validation, binding username, email, and password inputs, and handling submit with form value logging.

Install and configure NgRx store to manage a global state with actions, reducers, and effects. Dispatch typed register actions and enable dev tools.

Install redux dev tools to debug NgRx store, connect Chrome extension, and configure standalone store dev tools with max age, logOnly in production, and trace false and 75 trace limit.

Define and implement authentication interfaces to standardize registration requests and current user data, using a shared types folder for reusable, validated data across the app.

Define an auth state with isSubmitting, build an NgRx auth feature reducer with on actions to toggle isSubmitting on signup, and register it in the store for global state management.

Learn to create a feature selector and an isSubmitting selector in NgRx, expose isSubmitting$ as an observable, and bind it with the async pipe.

Build an Angular auth service, inject the HTTP client, and post the register request to the environment-based API URL at /api/users, mapping the auth response to a current user observable.

Learn to implement register effects in Angular and NgRx by using create action groups for start, success, and failure, and building an effect that calls the API and dispatches outcomes.

Introduce a backend errors interface and propagate validation errors in the auth actions. Update reducers and actions to track current user, loading, and submitting states.

Implement and render backend error messages in an Angular app using combineLatest, a shared backend error messages component, and converting errors to an array of strings for display.

Store the access token in local storage with a reusable persistence service. Ensure it survives reloads and is attached to API headers, using effects and redirect after registration.

Copy and adapt the register flow to build a login page. Implement login request and service, add login actions and effects, update reducer to store token and redirect.

Copy register page to build login component, bind the login store, and implement email and password form with backend error messages. Use router-store to clear validation errors on navigation.

Implement a shared top bar in angular that shows a logo, navigation links, and a profile area updated from the store for logged-in and logged-out states.

Implement get current user in NgRx with a service method for get /api/user, start, success, and failure actions, an effect, a reducer update, and token stored in local storage.

Implement an auth interceptor as a function in shared services, clones request, reads the access token from local storage via persistence service, and attaches an authorization header to each request.

Plan a scalable feed architecture using a reusable feed component in Angular, fetching data from the API, storing in ingenix, and rendering posts with global, your, and tag feeds.

Create a global feed feature with routing and a shareable feed component, building the global feed component, its routes, and a reusable feed to render on the home page.

Build a feed store in Angular with NgRx by creating feed interfaces and a service to fetch articles and count, with actions, effects, reducer, and selectors for loading and data.

Learn to fetch and render a global feed in Angular and NgRx by wiring components to the store, dispatching feed actions with an api url, and handling loading and errors.

Create reusable helper components: banner, error message, and loading indicator, as standalone shared components, register them in the global feed, and render messages from backend data with a default fallback.

Create a reusable, shareable pagination component driven by total items, a configurable limit from environment variables, and a base URL from the router, updating the current page via query parameters.

Create a reusable angular pagination component in shared components with total, limit, current page and url inputs, using a range utility to generate pages and router links for page query, refetching feed data.

Implement limit and offset-based pagination by calculating offset for each page, and build a clean API URL using the query-string library to stringify parameters while preserving existing query parameters.

Implement a reusable tag list component in an angular feed, using a popular tag type and an input array of tags to render a pill-styled tag list on the right.

Implement a shareable popular tags component with a service, NgRx store, actions, effects, and selectors to fetch, store, and render links to tag pages in a sidebar.

Build a reusable feed toggler component in an Angular real-world app to switch between global feed, your feed (requires login), and a tag feed via an optional tag name input.

Master populating your feed by following a user, registering and logging in, and authenticating requests with a token, then testing endpoints in Postman to fetch articles for your feed.

Duplicate the global feed in an Angular NgRx project, set up your feed route and component, and build API URLs and tag feed with dynamic slug handling.

Build a single article page in Angular with NgRx by creating a shared article service, article route, and article component, plus a get article flow with actions, effects, and reducer.

Render the article page by binding a feature store, dispatching get article with the route slug, and using article data to show content, tags, and author-based edit options.

Implement a non-shared delete article flow in Angular with NgRx by adding a delete article method, actions, and an effect, then redirect to home on success.

Learn how to implement a shareable article form for creating and editing articles in an Angular NgRx project, including routing, a form values interface, loading states, and backend validation.

Build a reusable article form in Angular using form builder and a non-nullable form group, initialize with external values, and emit cleaned article data on submit.

Create article feature implements a complete store with service, actions, effects, and reducer to post article data, handle validation errors, and redirect to the article page on success.

Learn to implement updating an article in an Angular NgRx app: fetch by slug, pre-fill the edit form, show a loader, and update via PUT with redirect to the article page.

Learn to build a settings page in Angular and NgRx by wiring update current user via the auth service, with actions, effects, reducers, and a lazy-loaded feature store and routes.

create a settings page that uses a reactive form bound to the current user data, patches values, and dispatches update current user on submit via NgRx.

Implement optimistic updates for add to favorites in an Angular app by creating a reusable add-to-favorites component that toggles favorited and updates the favorites count instantly.

Create a dedicated add to favorites service and NgRx effect to call the API with a slug, using post and delete to update the article and dispatch success or failure.

Create a user profile feature in Angular with routing, a dedicated component, and a NgRx store, including services, actions, effects, and reducers to fetch profile data by slug.

Render a user profile in an Angular NgRx app by reading the slug, fetching the profile, and combining user data to show details and a conditional settings link.

Explore the inject function in Angular 14 to inject route, store, and router. Compare constructor and inject approaches; constructor remains valid but inject offers sharing across components.

Explore Angular signals in Angular 16 and learn how to use select signal and computed to read and transform store data with minimal code changes, preserving RxJS patterns.

Complete the course by finishing this Angular and NgRx project with homework tasks like follow/unfollow, favorite buttons, article navigation, comments, and admin features, or start your own project you love.