Angular Material, Universal: A Rapid Guide - Advanced

Install angular, download and install, then run npm install globally to set up the project with routing; open in the ide and run on port 4200 as the app compiles.

Install docker, clone the repository, run docker compose up to build the backend, seed the database, and expose the APIs for the app on localhost.

Replace the template with a bootstrap template, add Bootstrap via the index CSS link, and modularize the app by creating components like email and manual menu for the dashboard.

Learn to structure Angular apps with public and secure modules, create routes and components, and guard access with login status via router outlet.

Reuse the login form to build the register page with controls for first name, last name, email, password, password confirm. Post to api register and navigate to login after success.

Build a login form in the logging component using a form group and form builder for email and password, post to the login API, manage credentials and JWT cookies.

Create a centralized authentication service to handle registration and login, wrapping the EDP client and authenticated user retrieval, and standardizing requests, observables, and credentials.

Learn how to fetch the authenticated user in an angular app, including defining a user interface, updating endpoints, and using with credentials to manage cookies.

Implement logout by sending a post with credentials, clearing cookies, and subscribing to the response, then navigate to login and protect routes with a secure component that redirects unauthenticated users.

Interceptors automatically attach credentials to every request by cloning the request and setting withCredentials to true, applied via a provider for all components.

Create a profile component with two reactive forms for account info and password, using a form builder and form groups to update user data via put requests.

Explore using static event emitters in Angular Material, Universal to share user data between components, subscribe to events, and reduce server calls while enabling instant profile updates.

Create a dedicated users page with a main page redirect to /users, highlight the active link, and fetch/display user names and emails via a user service from environment.api/users.

Learn to install and configure Angular Material, convert a user table to an Angular Material table, define a data source and columns (id, name, email, actions), and apply full-width styling.

Explore implementing MatPaginator for a material table, using ViewChild and AfterViewInit to bind a data source and enable paginated, per-page item controls.

Craft a user links page using Angular Material components, router links, and a links service to fetch and display a link list, including counts and revenue calculated from orders.

Create and integrate a product component with a products table (image, title, description, price, actions) wired to a service that fetches all products and supports 10-item pagination.

Create products by building a product form with a form group and form builder to collect title, description, image, and price, then post to the endpoint and navigate to products.

Use a route data flag to distinguish product create from update, fetch the product by idea for editing, and redirect to the products page after submission.

Delete a product in an Angular Material Universal app using a delete action with confirmation, invoking the product service, and updating the data source to remove the item.

Create an orders component, service, and interface to fetch and display customer orders, showing email and order totals in an expandable panel with a table of order items.

Configure the new Angola ambassador Angular project, adjust the port to 4300, apply the template and bootstrap, update index, and run the server to view the app in the browser.

Import common files from admin and ambassador projects, set up public models and interceptors, configure environment API and routing, and establish a main module with login and register.

Build and refine the navigation component using the main model and header. Toggle login and signup based on JWT authentication and display profile and logout when signed in.

Explain how to implement a secure profile in a multi-module Angular app, using a shared model, reactive forms, router outlets, and proper module wiring for authentication.

Implement a dynamic header that toggles login, register, or user revenue based on authentication, and synchronize user data across components with a shared service and route-aware display.

Create a secure stats page and a rankings page by wiring stats and rankings components to the navigation with router links, fetching links and revenue via services.

Explore router link options to navigate between front-end and back-end products components, configure routerLinkActive with exact matching, and apply underline styles for active links.

Fetch backend products via a get endpoint and map the data object containing a product array to render each product’s image, title, and price. Paginate results to nine items.

Learn how to implement lazy loading by adding a load more button, handling page query parameters, and concatenating new products as the user navigates pages.

Master http params in Angular Material Universal by implementing pagination logic, showing or hiding the button based on the last page, and ensuring refresh navigates to the first page.

Add a search input and change listener in the back-end products component, passing query and page, merging search with pagination via route query.

Sort products by price via a select input; trigger a sort function on change and pass selected value, then navigate and reset the page to show ascending or descending results.

Learn how to implement product selection in an Angular Material interface by styling selected items with a border, using a click listener to toggle a selected array and isSelected checks.

Generate links from selected products by clicking a dynamic button, calling the backend links API, and displaying a checkout link when logged in, with error handling when not logged in.

Finish the frontend by reusing backend logic to fetch all products from environment API /products, wiring a product service, and preparing filters with plans to use pipes.

Learn to build and apply custom pipes for pagination, filtering, and sorting in Angular Material, including module integration, pure vs impure pipes, and the impact of pipe order on results.

Set up the Angular universal checkout on port 5000, integrate a Bootstrap checkout template, and remove billing and credit card sections while requiring first name and email.

Create three components—the form, a success page, and an error page. Fetch backend data with a link service and environment API to show ambassador name and email.

Discover how Angular Universal enables server-side rendering to render content on the server, improving search engine optimization by exposing rendered content in the page source for Google.

This lecture demonstrates wiring a user and product data flow, rendering products with title, description, and price, and adding a quantity input to prepare calculating totals in the next tutorial.

Calculate the order total by maintaining a quantities array, initializing each quantity to zero, and summing product price times quantity using reduce to reflect changes in real time.

Build and render a reactive form using a form group and form builder, post an order via the order service to the API / orders, and handle the response.

Explore Stripe integration by using the publishable key, loading the Stripe JavaScript, and redirecting to checkout with a session ID; manage orders and confirm payments through the order service.