Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Angular 20 Masterclass – Build Real Project

Name: Angular 20 Masterclass – Build Real Project
Rating: 4.2 (12 reviews)

From features of Angular 16 to 20: build a full app with signals, SSR with hydration, routing, and deployment

Created byImad BOU AKL

Last updated 12/2025

English

What you'll learn

Build a real-world Angular 20 application from scratch using the latest features
Understand and apply key Angular concepts like components, routing, and services
Create responsive user interfaces with data binding and reactive forms
Connect Angular apps to REST APIs and handle real-time data.
Master Angular CLI to efficiently scaffold and manage your projects.
Deploy your Angular application online using modern hosting platforms like Firebase
Apply best practices in Angular architecture to write clean and maintainable code

Course content

16 sections • 87 lectures • 4h 7m total length

Why Angular 20 is the right choice ?2:17
What you'll build in this course: the Operis app (project management tool)1:59
Build and connect the Angular 20 front end for a project management tool, consuming a Spring Boot microservices backend via Spring Cloud Gateway, with authentication, projects, tasks, profiles, and subscriptions.
Understand the business need: manage projects, tasks, and accounts in Operis2:10
Fullstack architecture explained: Angular, API Gateway, and backend services2:09
Explore how Angular 20 front end communicates with back end services through a secure API gateway. See request routing, JWT authentication, and service discovery in a modern microservices setup.
Your Angular 20 Learning Roadmap1:33
How to Follow This Course and Use the Source Code1:47
Start with a foundations-first Angular 20 masterclass that outlines Opry's application and project flow, then explore theory before moving into front-end coding with real-world scenarios, clean structure, and practice-driven exercises.
Live Demo: Operis Application – Business Flow Overview2:42
Accessing the Operis Project Source Code0:21
In this lecture, you will find a PDF containing all the instructions needed to access and download the source code used throughout the Angular 20 Masterclass – Build Real Project.
This PDF includes:
The links to the project’s GitHub repositories (Angular frontend and required backend)
The commands required to clone the repositories
We recommend downloading the source code at the end of the course, so you can follow the practical exercises more effectively and avoid being spoiled by the complete implementation.
Download the PDF and follow the instructions.

What are standalone components and why they matter1:31
Create a page with standalone components only0:57
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.
Singleton and Local Services in Standalone Components1:40
How to create reusable standalone UI elements0:53
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 standalone1:44
Angular Standalone Components

Client-Side Rendering (CSR): full rendering in the browser3:01
Client-Side Rendering (CSR)
SSR without Hydration: SEO benefit, performance drawback2:38
Explore SSR without hydration in angular, delivering full HTML for instant content and improved SEO, while interactivity is delayed until bootstrap completes.
SSR without Hydration
SSR with Hydration: fast load and great SEO1:33
SSR with Hydration
Presentation: SSG - Static Site Generation1:21
Static Site Generation (SSG)
Angular 20 Rendering Modes: Complete Overview1:49
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.
Choosing the Right Rendering Mode (Angular 20)

Install Node.js (includes npm)1:44
Install Angular CLI (v20)1:32
Install Angular CLI version 20 globally, then verify the setup with ng version to confirm the package and related Angular versions are installed.
Create the Angular Project with CLI1:13
Understanding the Project Structure6:05
Running Your Angular Application with Angular CLI1:49
Understanding the Router Outlet1:31
Updating the Default Angular Test (app.spec.ts) After Replacing the App Template3:24
Planned Folder Organization for Operis4:58

Introduction: What we're building2:18
Live Coding: Create the standalone user registration component3:48
Live Coding: Building a User Registration Form with Angular Reactive Forms9:22
.
Building Smart Validation and Error Handling in Angular6:11
Live Coding: Goodbye ngIf, Hello @if2:22
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.
How Angular Calls the Backend to Create an Account1:27
Here is the complete workflow Angular follows to create a new user account:
Angular → API Gateway (8080)
Angular sends an HTTP POST request to the Gateway running on port 8080.
Gateway → User-Account Service
The Gateway forwards the request to the User-Account microservice.
Endpoint Called:
POST /api/users/create

With the following JSON payload:
{
"email": "user@example.com",
"password": "secret123"
}

User Created → Response
If the account is successfully created, the backend returns:
201 Created
Live Coding: Setting Up the Model and Service to Create a User Account6:29
Let’s define a user model in user.model.ts to structure the data we’ll collect (e.g. name, email, password).
We’ll also create a user.service.ts file where we can later add methods to handle the registration logic (e.g. HTTP POST to backend).
This helps separate concerns and keeps our component clean.
Live Coding: HttpClient in Angular: Configuring app.config.ts1:13
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.
Enhancing the Registration Form: Loading, Success, and Error Messages2:37
End-to-End Testing of the Account Creation Flow2:48
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.
Live Coding: Test the user account service11:23
Finally, we’ll test our setup by running the Angular app and navigating to /register.
We’ll verify that the route loads the correct component and that the form UI appears as expected
Understanding the UserRegistration Component Tests4:46

Let’s Build the Projects Section: Create, Manage & Control Your Projects0:47
Projects Page Foundation: Structure, Header, and Navigation1:50
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.
Create Project Modal: UI Design, Validation, and Component (UI + Reactive Form)3:47
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.
Project Creation Modal: State Control with Output-Based Parent–Child Events4:42
Testing Project Creation via UI and Network Request Validation1:55

Requirements

Basic knowledge of HTML, CSS, and JavaScript
A computer with internet access
A modern web browser (Chrome, Firefox, Edge…)
Visual Studio Code installed (recommended code editor)
Node.js and npm installed (installation steps will be covered)
No prior experience with Angular is required — you'll learn everything step by step

Description

Are you ready to learn Angular 20 and build real-world web applications from scratch?

In this hands-on, project-based masterclass, you will go step by step through the most important features of Angular 20, the latest and most powerful version of one of the world’s most popular front-end frameworks.

Whether you are a complete beginner or a developer with experience in JavaScript or backend technologies such as Java or Node.js, this course will give you the skills and confidence to create professional, scalable web applications using Angular.

By the end of this course, you will have built and deployed a fully functional Angular 20 application and mastered the tools and techniques used by real developers in real companies.

Real-World Backend Context with Operis

This Angular 20 course is connected to a real microservices-based backend project called Operis. In this course, we focus entirely on building the frontend application and understanding how Angular communicates with a real backend system.

The backend already exists and is used as a realistic environment. We do not implement backend logic here. Instead, we concentrate on frontend concerns such as API communication, authentication flows, state management, routing, and clean Angular architecture.

This approach allows you to learn Angular 20 in a real-world context without distractions, while still working with an enterprise-grade backend.

What Makes This Course Different?

100% updated for Angular 20
Clear and beginner-friendly explanations
A real-world project built step by step
Focus on modern Angular features and best practices
Clean and scalable frontend architecture
Bonus: Deploy your Angular application using Firebase Hosting
Taught by an experienced software engineer

What You Will Learn

Build a real Angular 20 application from scratch
Use Angular CLI to generate components and services
Master routing, data binding, and reactive forms
Communicate with REST APIs using HttpClient
Handle authentication and protected routes
Apply best practices for clean and maintainable code
Deploy your Angular application online

This Course Is For

Aspiring frontend developers who want to master Angular
Backend developers who want to learn modern frontend development
JavaScript or TypeScript beginners
Students and professionals preparing for frontend job interviews
Anyone curious about Angular 20 and real-world web development

Requirements

No prior Angular experience is required.
Basic programming knowledge is helpful but not mandatory.

Bring your motivation, follow along step by step, and let’s build something great together.

Who this course is for:

Developers who want to learn Angular 20 from scratch and build real-world applications
JavaScript or TypeScript beginners looking to master modern frontend development
Backend developers (Java, Node.js, etc.) who want to add Angular to their skill set
Students and professionals preparing for frontend developer jobs
Anyone curious about building responsive, dynamic web apps using the latest Angular features

Angular 20 Masterclass – Build Real Project

What you'll learn

Explore related topics

Course content

Introduction to Angular and the Operis project8 lectures • 15min

Standalone components and new Angular structure5 lectures • 7min

Angular 20 Signals and reactivity4 lectures • 13min

How Angular Renders Your App5 lectures • 10min

Environment Setup & Project Bootstrap8 lectures • 22min

OPERIS Backend API Overview for the Angular Application3 lectures • 21min

Create a user account page using routing and standalone components12 lectures • 55min

Implementing User Authentication (Login & JWT)6 lectures • 17min

Building the Dashboard Structure and Navigation Flow5 lectures • 11min

Project Creation Workflow: Designing a Scalable Feature for Teams5 lectures • 13min

Requirements

Description

Who this course is for: