Angular 20 Masterclass – Build Real Project

Explore standalone components in Angular and learn why Angular moved away from Ng modules. Discover how self-contained components simplify structure, speed up bootstrapping, and enable easier code reuse.

Build a page completely with standalone components, without modules, making each page self-contained, reusable, and easily movable, with the router and other components also standalone.

Create reusable standalone UI elements in Angular standalone components, like a simple button with label and variant inputs and a clicked output, usable across the app without Ng modules.

Migrate a feature module to standalone by turning the user list component standalone, replacing child router modules with a routes array, and mounting the routes under /users.

Explore Angular signals, how they replace manual subscriptions, enable instant UI updates, and share state across components with dot set, dot update, and template reads.

Compute values automatically from signals and update them when signals change, such as double count or total price; use effect to run side effects like logging and dom updates.

Bind signals directly in the template without observables or async pipes to simplify Angular templates and replace subscriptions with direct signal usage.

Explore client side rendering in Angular, where the browser loads the JavaScript bundle and renders the app, with SEO tradeoffs and fast in-app navigation.

Explore SSR without hydration in angular, delivering full HTML for instant content and improved SEO, while interactivity is delayed until bootstrap completes.

Pre-generate HTML at build time and serve it from a CDN. Hydrate for interactivity, enjoy fast performance, strong SEO, with no server-side processing and build-time data limits.

Explore Angular 20 rendering modes, including CSR, SSR with hydration, and SSG with hydration, plus a hybrid approach powering the homepage and about page, blog posts, dashboards, and fallbacks.

Install Angular CLI version 20 globally, then verify the setup with ng version to confirm the package and related Angular versions are installed.

Create your first Angular project with Angular CLI version 20, using standalone components and the command shown, generating a folder with src, angular.json, and package.json.

Explore how the router outlet serves as the container that loads and displays route components within the app shell, enabling Angular routing to render each page inside this tag.

Explore a feature based modular architecture with standalone angular 20 components, lazy loading, and a clear separation of business logic from shared utilities, guards, and jwt based authentication.

Import and run a postman json file to test the operis backend in IntelliJ, configure bearer token authentication, create and update projects, and manage project IDs with global variables.

Explore remaining architecture components of Operis microservices, including hexagonal architecture, core and service layers, ports, and adapters. Observe input and output ports, payloads, validations, and controllers shaping robust microservice behavior.

Create a standalone user registration component in Angular with the CLI. Add routing and a placeholder view. The next lecture adds a reactive form with email, password, and confirm password.

Convert to the new if block syntax in angular 17+ to boost performance and predictability, applying it to form validation messages in a registration form while preserving logic.

Configure app.config.ts to enable the http client at the application level so Angular can inject it into the user account service and avoid no provider for http client errors.

Enhance the registration experience in Angular: loading, success, and error messages. Use isLoading to disable submit button, show a spinner, and display green or red boxes for feedback.

Test end-to-end account creation from the angular form to the microservices backend, including docker compose startup and offline handling. Confirm a 201 created response and database storage.

Explore how the user registration component is tested, validating empty and valid forms, password mismatch, and correct payload submission to a mock backend via spies.

Add login method to the user account service so Angular can authenticate with backend, sending email and password to auth login endpoint and handling login response with JWT.

Implement a login flow that stores the JWT token from the backend in local storage using rxjs pipe and tap, preparing authentication for the interceptor and guards.

Build the dashboard structure to centralize access to projects, tasks, and team information, and wire the login flow to redirect to the dashboard via the dot router after sign-in.

Create a new dashboard component and route, update the login flow navigation to redirect to the dashboard, and test the redirection after sign-in.

Manually verify authentication workflow by checking local storage before login, log in to store the JWT token, then log out to remove the token and redirect to login page.

Build a reusable angular header with a top bar and navigation to dashboard, projects, and profile, highlighting the active route and clearing the jwt token on logout.

Manage projects by adding a create button, displaying existing projects, attaching tasks, and confirming deletions; this section is Oprah's central hub for CRUD operations.

Launches the projects page as the main entry for project management, with a shared header for navigation and a layout featuring a title, subtitle, and empty state.

Build a reusable Angular project modal with a reactive form, validation, and error handling. The component emits submit and close events, handles backdrop clicks, and shows a loading state.

Learn to manage a project creation modal in Angular by toggling a show modal flag, handling projectSubmit and modalClose outputs, calling the backend API, and refreshing the project list.

Test project creation workflow from the ui and validate the network request, including a post call with name and description, owner as the logged-in user, and the resulting created project.