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 22 Full Course - Complete Zero to Hero Angular 2026

Name: Angular 22 Full Course - Complete Zero to Hero Angular 2026
Rating: 4.6 (1056 reviews)

Angular 22 Mastery: Harness Signals, defer, @if, @for and More for Advanced Core and Common Module Features

Created byHashmath Rz

Last updated 10/2026

English

German [Auto],English [Auto],

What you'll learn

Master Angular 22 from the ground up – Understand the core building blocks like Components, Services, Modules, and more.
Dive deep into Angular’s inner workings to understand how it all fits together.
Build dynamic web applications using Angular's powerful tools and features.
Create reusable components to efficiently structure your Angular app.
Implement Dependency Injection and Services for clean, scalable architecture.
Master RxJS and Observables to handle asynchronous data flows in Angular.
Master Angular 22 New Reactive Programming Signals
Speed up development with Angular CLI commands and best practices.
Understand Angular lifecycle hooks and manage application state effectively.
Stay up to date with Angular 22's latest features and future-proof your skills.
Have in-depth knowledge how to build custom Attribute and Structural Directives
Understand key questions about Angular: Why Angular, what are the benefits?
Feel comfortable with Advanced topics like View Encapsulation, Change Detection, Dependency Injection, Lifecycle Hooks and more

Course content

23 sections • 593 lectures • 47h 8m total length

The Fear Nobody Says Out Loud3:14
Honest Truth About the Junior Door4:08
The Vibe Coding Backlash4:03
AI Is an Amplifier4:08
The Doubt After Picking Angular3:44
Honest First — React Leads4:27
Where Angular Actually Wins4:09
Enterprise Proof — Angular v224:15
Why Grind Fundamentals at All?3:59
More AI Use, Less Trust3:54
Same Tool, Opposite Outcomes4:36
Vibe Coding vs Vibe Engineering4:11
A Fair Worry Before We Start4:02
The Dual-Skill Approach, Concretely4:18
Why This Order Is Non-Negotiable4:10
The Overwhelm and the Outdated Fear3:29
Why This Course Won't Be Outdated4:22
The Roadmap, Module by Module3:54
Who You Become — the Next Step3:00

What is Angular4:53
Explain that Angular is a framework for building web apps, not a language, written in TypeScript, backed by Google, with the full setup out of the box.
What is Exactly A Framework Vs Library4:34
React / Vue Enterprise View6:32
So Many Pieces, How Do They Fit?4:37
Your App Is a Tree of Components5:10
Learn that an Angular app is a tree of components, each combining a TypeScript class with a template to form reusable, isolated UI blocks.
The Supporting Cast and How It All Fits Together6:26
Setting Up the Workshop and Installing Node5:13
Installing the Angular CLI4:29
VS Code, the Language Service, and Our First Real Command4:14
Why We Never Build an Angular Project By Hand4:12
Running ng new and Answering Its Questions4:46
What ng new Built, and Firing Up the Dev Server5:02
Seeing Your First App in the Browser4:25
Opening my-first-app and the Wall of Files4:04
Inside src, and Your Very First Component4:55
The Rest of src, and the Files That Boot Your App5:37
The Config Files, What's Not Here, and Wrapping Up5:17
Getting to Know the Everyday CLI Commands4:23
ng generate — Building Files Without the Boilerplate5:36
ng build — Packaging Your App for the Real World4:25
ng test and Knowing Which Command to Reach For4:19
The Magic Gap — What Really Happens When You Hit Enter4:25
Bootstrapping — How Angular Starts the Engine5:27
Change Detection — How Angular Keeps the Screen in Sync6:00
This Page Isn't Ours Yet3:13
Making the App Say Hello Angular3:32
Interpolation — Wiring Class Data to the Screen4:08
X-Ray Vision for Your Angular App6:04
The Profiler and Wrapping Up Module 34:11

What is TypeScript4:37
The JavaScript Problem5:22
How TypeScript Fixes It3:57
Convert the file from task.js to task.ts, define an interface Task with title: string, completed: boolean, and priority: number, and declare const task: Task to enable TypeScript’s type checking.
TSC Compilation2:46
Why Angular Requires TypeScript2:18
Angular enforces TypeScript as the foundation for building large apps. Typed components, services, and API data reduce bugs and improve editor feedback.
RoadMap2:14
Installing Node & TypeScript2:58
Your First TypeScrip File2:16
Set up a task manager in TypeScript, create index.ts, declare a string message, log it, compile with tsc, and run node to confirm type checking.
tsConfig.json File3:11
Configure a tsconfig.json as the project-wide settings file to apply TypeScript rules across all files, set target to es2020, and compile to dist with strict mode via tsc --init.
Watch Mode And Angular2:53
What Are Type Annotation4:20
Explore type annotations in TypeScript to describe data with explicit labels, using the colon syntax to bind strings, numbers, and booleans, and prevent runtime surprises in a task manager project.
String And Number4:08
Learn to annotate variables with string, boolean, and number types in TypeScript, and build a task object with title, completed, and priority, showcasing type safety and editor feedback.
Boolean, Null And Undefined4:15
The Dangerous Any Type3:50
The Safe Unknown type3:41
Explore how the unknown type safely handles external data in TypeScript by requiring a type check before use, unlike any, with a practical example of an api response.
Type Never And Summary5:02
The Array Problem3:42
Typed Arrays3:22
Learn to enforce type safety in TypeScript by declaring typed arrays for task objects, prevent pushing wrong types, and understand both task[] and array<task> notations plus live compiler checks.
Union Arrays3:06
Explore union arrays in TypeScript within Angular projects, using (string | number)[] to store mixed IDs while preserving type safety and code clarity.
Tuples3:47
The Problem of Describing Shapes Repeatedly4:30
Explore why repeating shape descriptions hurts maintainability and learn to define a named interface for user and task shapes, using interfaces and type aliases to keep code in sync.
Optional & ReadOnly5:36
Learn how interfaces enforce a contract in TypeScript by defining a Task interface with required id, title, completed, and priority fields, and an optional due date with a read-only id.
Extending Interfaces5:01
Extend interfaces by creating a base entity with id and created at, then have task and user inherit these fields; add a version for optimistic locking across all entities.
Type Aliases and Intersections4:50
Explore TypeScript type aliases and intersections in Angular projects, showing how to describe unions and function signatures and merge task and owner shapes.
Interface Vs Type - The Decision Framework3:35
The Status Bug4:39
Learn how union types and literal types constrain the task status to 'todo', 'in progress', or 'done', preventing invalid strings and hidden bugs in TypeScript.
Union types Deep Dive3:55
Demonstrate union and nullable types in TypeScript using a task model, validate assignments, and extend to function parameters and return types, then introduce literal types.
Literal Types4:58
Discriminated Unions4:24
Learn how discriminated unions in TypeScript power robust API response handling in Angular, enabling type narrowing between success with tasks data and error messages.
Type Narrowing5:08
Master type narrowing in TypeScript by using the tight off operator to refine unions on primitive types, and the in operator and discriminant checks to handle object shapes safely.
Angular Patterns And Summary5:08

Introduction to Angular5:07
Explore how the Angular front-end framework speeds up web development by handling DOM manipulation, HTML, CSS, and JavaScript integration, enabling dynamic content with minimal code.
What is Single Page Application2:08
Explain single page applications, which load most resources at launch and update data without reloading the page, delivering fast, responsive user experiences in browsers with JavaScript frameworks like Angular.
Angular CLI4:51
Use the Angular CLI to create a new Angular app with ng new, navigating to a desktop project folder. Select CSS and skip SSR to download the necessary files.
First Angular Project5:08
Open your first Angular app in VS Code, run ng serve in the integrated terminal, and view the local server at localhost:4200.
NG SERVE Explained (BTS Process)5:41
Explore the angular project file structure, including dot angular folder, dot VSCode folder, node_modules, and angular.json, and learn how ng serve uses compiler cache to speed builds.

One Component Cannot Hold a Whole App4:34
What a Component Actually Is?4:32
Component Architecture5:09
Why We Don't Hand-Build the Components4:09
Generating the First Component with Angular CLI4:23
Placing the Component Inside App4:28
TemplateURL vs Template4:05
Writing Template Inline4:16
Which One, and When (Component Template)4:52
The Problem — Plain CSS Leaks Everywhere4:54
Component Styles Are Scoped by Default4:17
Component View Encapsulation — The Emulated Default4:36
The Three Modes, and Where Component CSS Styles Live5:50
Standalone Components - Where Is All the Boilerplate?3:59
The Old Way — NgModules4:40
The New Way — Standalone4:29
How imports Works, Why It's Better, and What's Next4:25
The Problem — A Greeting Stuck Saying the Same Thing3:25
Exposing an @Input on the Child Component4:02
Passing Data Down to Child Component3:59
Reusable Components and What's Next3:36
Child to Parent Communication4:45
The Output — Teaching the Child to Emit4:57
The Parent Listens — Wiring the Whole Loop4:55
The Recipe, One More Example, and What's Next5:28
The Reusable Card Problem, and Why Inputs Can't Carry Markup5:01
Meet Content Projection - ng-content4:31
Styling the Card and Projecting Any Markup You Want4:05
The Default Single Slot3:40
One Slot Can't Split Content Into Regions4:10
Named Slots with select - Multi-Slot Content Projection4:38
A Reusable Title / Body / Footer Card4:37
The Mess That Creeps In - Component Naming Conventions4:10
Naming Conventions the Angular Way5:58
Small, Focused, and Thin Component Structure5:17
Mini Project — User Profile Card4:45
Designing the Card — Template and Scoped Styles3:59
Making It Reusable — Receiving Data with @Input3:44
Talking Back — Emitting a Follow Event with @Output4:01
Custom Footers with ng-content, and Closing Module 44:14

Templates 101: How Angular Connects Class and View6:16
Interpolation Explained – {{ }} Under the Hood6:31
Method Calls, Conditions, and Where Interpolation Stops7:02
The Problem with Static HTML Attributes3:49
Property Binding, Square Brackets and the Real Property5:07
Property Binding in Action – src, alt, title5:46
Property Binding Gotchas – Strings vs Expressions4:30
Why Buttons Need Event Binding6:06
Event Binding – (event) Syntax4:56
The $event Object – Reading Event Data5:43
Event Binding – Statements vs Expressions3:57
Binding to Custom Component Events5:05
One-Way Binding Isn't Enough – The Problem4:39
Two-Way Binding by Hand – [value] + (input)4:24
[(ngModel)] – The Banana-in-a-Box Syntax4:43
How [(ngModel)] Works Under the Hood5:38
The Problem: Focusing an Input from TypeScript5:31
Template Reference Variables – #ref Syntax5:05
Template Ref Rules – Scope and Access4:51
Template Refs on Custom Components5:27
The Problem: Conditional Content in Templates4:54
Angular's New Control Flow – @if / @else5:27
@else if – Chaining Conditions4:55
The Problem with Long @if/@else Chains4:41
@switch, @case & @default Explained5:46
The Problem: Repeating Markup by Hand5:21
Looping with @for – The Basics6:13
Why track Is Required in @for5:13
Common track Mistakes (and How to Fix Them)6:03
@for's Implicit Variables – $index, $first, $last4:56
@for's @empty Block Explained4:44
Template Expression Rules – What's Allowed6:12
How Often Do Template Expressions Actually Run?5:26
Refactoring Logic Out of Templates6:16
Template Best Practices Checklist4:17
Mini Project – Planning a Dynamic Product List4:41
Mini Project – Rendering the List with @for4:33
Mini Project – Conditional Styling with @if/@switch4:47
Mini Project – Adding Products with Two-Way Binding5:46
Mini Project – Removing Items & Fixing a Real Bug6:34
Mini Project – Computed Totals & Module Wrap-Up6:52

What Is a Directive? The Term Explained6:09
How Directives Extend an Element5:42
The 3 Directive Types — Component, Attribute, Structural5:48
Spotting the Directives You've Already Been Using6:43
Conditional Styling — The Problem5:48
Single Class Binding — [class.name]5:39
Binding the Whole class Attribute — [class]5:41
Style Binding & Unit Suffixes — [style.width.px]6:19
NgClass & NgStyle Explained5:07
NgClass vs Class Binding — Which to Use6:47
*ngIf — The Legacy Star Syntax6:55
*ngIf else & ng-template6:37
*ngFor & trackBy6:59
ngSwitch, ngSwitchCase & ngSwitchDefault6:48
Migrating to @if / @for — The Control Flow Schematic7:23
Why Build a Custom Directive? The Problem5:46
Repeated Markup — and the Case for a Directive5:12
ng generate directive & ElementRef6:02
Reacting to Events with Host Listeners5:57
@Input Named After the Selector — appHighlight5:47
Why a Custom Structural Directive? The Problem6:14
Desugaring the Star — What * Expands To6:19
Building *appUnless — TemplateRef & ViewContainerRef5:54
Setter Inputs — Running Code on Every Change5:38
Wiring It Up with ng-template (Long Form)5:36
ng-container & Template Context — let6:52
Beyond nativeElement — Why Host Bindings Exist4:38
The host Object — Bindings & Listeners in One Place5:11
@HostListener & @HostBinding Decorators4:20
host Object vs Decorators — Which to Use5:45
Repeating Directives in Every Template — The Problem4:19
Why a Component Can't Apply a Directive to Itself5:05
hostDirectives — The Directive Composition API6:34
Exposing inputs & outputs — The 5 Rules4:35
Mini Project — What We're Building4:50
Finishing the Highlight Directive4:55
Generating the Tooltip Directive4:34
Building the Tooltip — Positioning & Cleanup5:24
Styling the Tooltip & Applying Both Directives4:27
Module 6 Recap — Directives Wrapped Up4:46

Why Pipes? Formatting Without Methods4:39
The Component-Method Approach and Its Cost5:05
Your First Pipe CurrencyPipe5:48
The Built-in Pipes & the Class-vs-Template-Name Trap6:14
Pipe Defaults What Angular Guesses4:39
Passing a Parameter with the Colon4:21
CurrencyPipe display Symbol vs Code4:30
digitsInfo, min/max Fraction Digits5:46
Chaining Two Pipes on One Value5:58
Formatting Text Without a Pipe5:33
TitleCasePipe, UpperCasePipe, LowerCasePipe4:18
Removing the Manual Fallback5:16
How titlecase Treats Every Word4:38
uppercase & lowercase Why They Go Last in a Chain5:54
Raw Numbers on the Page — The Problem4:52
DecimalPipe Registered as number, Not decimal5:16
digitsInfo Across number, currency & percent5:44
PercentPipe and the Nobody Expects5:08
number, currency & percent Side by Side5:01
Dates on the Page The Problem6:25
What an Unformatted Date Actually Renders5:45
DatePipe Format Aliases short, medium, full5:02
Custom Date Formats Case-Sensitive Tokens5:41
One Date, Two Formats, One Page5:54
Inspecting an Object in the Template The Problem4:52
JsonPipe and What It Does to a Date5:44
SlicePipe on a String5:44
SlicePipe on an Array5:50
KeyValuePipe Iterating an Object6:16
The Method That Was Already a Pipe4:55
ng generate pipe & the Generated Name5:00
PipeTransform the First Argument Is the Value4:55
Passing Arguments to a Custom Pipe4:30
Pipe or Method? The Decision Rule4:45
Why a Pipe Sometimes Doesn't Re-run4:58
Watching a Pure Pipe Refuse to Run5:52
pure: false and the Console That Won't Stop4:49
A Pipe Is Not a Method Call5:16
When to Reach for Impure and Module Recap5:21
Mini Project, What We're Building4:27
Shaping the Data for the Panel5:28
Filling In the Summary & Rendering It5:15
Five Pipes, One Panel, Zero Imports4:41
Why the Panel Didn't Update4:30
Adding a Timestamp & the Custom Pipe Again6:31
Module 7 Recap — Eight Lectures on One Screen5:36

The Component That Keeps Running5:21
Meet ngOnInit and ngOnDestroy4:28
Why the Constructor Is Too Early5:05
Fixing the Leak with ngOnDestroy4:53
DestroyRef and the Other Hooks4:27
The Input That Arrives Too Late5:35
ngOnChanges Runs Before ngOnInit4:51
Inside SimpleChanges5:28
ngDoCheck and the After Hooks6:20
The Full Lifecycle Order6:33
How Does the Screen Update?5:40
zone.js — the Missing Library4:25
What Angular Listens To4:49
Watching a Check Happen Live4:46
What This Explains About Our App (Change Detection)4:56
Checking What Never Changed6:12
Meet ChangeDetectionStrategy.OnPush5:18
The Old Default's New Name5:31
What OnPush Doesn't Save You From6:37
Mini Project - Planning the Capstone4:20
Mini Project - A Card That Logs Its Own Life4:20
Mini Project - ngOnChanges in Action4:20
Mini Project - One Click, One Card4:20
Mini Project - Cleaning Up with ngOnDestroy4:20
Module Eight on One Screen4:20

Why Angular Needs Signals4:21
What Is a Signal? Reactivity Explained4:17
Creating a Signal with signal()4:19
Reading Signal Values in the Template4:22
Updating Signals — set() vs update()4:58
The Problem: Duplicated Derived Values5:23
Converting an Array to a Signal4:02
Immutable Updates on a List Signal4:00
Derived State with computed()4:54
How computed() Tracks Dependencies5:06
Refactoring Away Manual Recalculation5:21
refactor derived totals into a lazy, memoized computed to replace manual recalculation, reducing re-renders and keeping category totals in sync with product changes.
When computed() Is Not Enough4:14
Side Effects with effect()5:13
Common effect() Mistakes to Avoid5:15
computed() vs effect() — the Rule4:30
Saving to localStorage with effect()6:38
Component Inputs Recap5:31
@Input Limitations4:26
Migrating @Input to input()5:29
Required Inputs with input.required()5:00
Type-Safe Inputs — Catching Mistakes5:34
Why Outputs Are Changing5:05
Migrating @Output to output()4:16
output() Is Parent-Compatible4:32
Typing output() Events4:51
Two-Way Binding Recap5:31
The Input + Output Boilerplate Problem5:23
[(ngModel)]-Style Binding on Components4:37
Two-Way Binding with model()4:35
model.required() and Its Limits5:22
Why Components Can't See Their DOM5:11
Element Access with viewChild()4:45
viewChild.required() for Components6:36
Projected Content with contentChild()5:47
Learn how contentChild queries projected content with an ng-content footer, using a template reference from the parent, keep the slot always rendered, and distinguish between view and content.
@ViewChild vs viewChild() — When to Use5:16
Signals Meet OnPush5:59
How Signals Trigger UI Updates4:37
Measuring Change Detection Runs5:03
Measure Angular change detection runs by instrumenting stock tip and cardchecked to show that a signal write updates only the data readers, illustrating onpush behavior.
Zone.js vs Signal-Based Updates4:30
Change Detection Best Practices4:46
Mini Project - Planning the Signals Refactor5:49
Mini Project - Fixing a Stale computed()4:58
Mini Project - The Mutation Trap in Signals4:26
Mini project - Immutable State Updates5:23
Mini Project - Effects, Queries and Final Cleanup5:39
Angular Signals — Full Recap5:01

Requirements

Basic knowledge of HTML, CSS, and JavaScript is recommended.
Familiarity with TypeScript is helpful, but don't worry, we'll cover the essentials.
A computer with Node JS and npm installed (we’ll walk you through the setup).
Eagerness to learn and build amazing Angular apps!

Description

This course will give you a solid foundation in Angular 22 by providing an in-depth tour of all the advanced features available in the Angular Core and Common modules.

These two baseline modules are the foundation for everything in Angular, so mastering them in detail is essential. Angular has evolved significantly over the years, and with the introduction of Signals, there are now multiple ways to approach certain tasks. In this course, we’ll cover each feature from both perspectives—using Signals and decorators, where applicable.

In this course, you’ll get a comprehensive guided tour of both basic and advanced functionalities available in these essential Angular modules, including features like Angular Elements.

We’ll cover everything from the most commonly used Angular features to the more advanced topics, such as change detection modes, style isolation, dependency injection, content projection, internationalization, standalone components, and more.

The course assumes no prior Angular experience. Each concept builds upon the previous one, so there are no forward references, making the learning process smooth and logical.

While we start with Angular fundamentals, the course quickly transitions to intermediate and advanced topics, ensuring there's something for developers at every level.

To help you master the standalone components feature, we’ll dedicate a section on how to migrate existing applications to use standalone components and remove NgModules completely.

Course Overview

We’ll begin with a quick, practical introduction to the Angular framework. You’ll set up your development environment and use the Angular CLI to quickly scaffold a project.

With this playground, we’ll answer common Angular questions: Why Angular? What are its main advantages and key features? You’ll learn about change detection and get introduced to Angular’s template syntax.

Next, we’ll explore all the features of the Angular Core and Common modules, including:

Custom components with @Component
Components @Input and @Output, and event Emitters
Control flow syntax: @if, @for, @switch
Directives: ngFor, ngIf, ngClass, ngStyle, ngSwitch
@defer for partial template loading
Observables, Built-In Pipes, Async Pipe, and Custom Pipes
@Injectable and Custom Services
Lifecycle Hooks (ngOnInit, ngOnDestroy, etc.)
HTTP Client - GET, POST, PUT, DELETE
@ViewChild, @ViewChildren, @ContentChild, @ContentChildren
Content Projection with ng-content and ng-template
Change Detection (Normal and OnPush), View Encapsulation
Structural and Attribute Directives (@Directive, @Host, @HostListener, @HostBinding)
Dependency Injection (@Inject, @Optional, @Self, @SkipSelf)
Custom Change Detection
Angular Elements and Standalone Components
Angular Signals and much more.

What Will You Learn In This Course?

By the end of this course, you will have advanced, practical knowledge of Angular 22. You’ll be confident in building Angular applications, with a detailed understanding of everything offered by Angular’s Core and Common modules.

Who this course is for:

Beginners who want to learn Angular from scratch and build dynamic web apps.
JavaScript developers looking to enhance their skills with a modern framework.
Developers familiar with other frameworks like React or Vue, wanting to master Angular.
Previous Angular users looking to upgrade their skills to Angular 22.
Anyone wanting to understand the inner workings of Angular and build scalable apps.

Angular 22 Full Course - Complete Zero to Hero Angular 2026

What you'll learn

Explore related topics

Course content

Angular in the AI ERA19 lectures • 1hr 16min

Getting Started With Angular (Updated Angular 22)29 lectures • 2hr 20min

Typescript Deep Dive For Angular (Updated to Recent)31 lectures • 2hr 3min

First Step to Angular (Angular Setup & File Structure)5 lectures • 23min

Standalone Components - The Building Blocks (Angular 22)40 lectures • 3hr

Templates and Data Binding (Angular 22 Standalone)41 lectures • 3hr 39min

Directives Standalone - Attributes & Structural (Angular 22)40 lectures • 3hr 49min

Pipes — Transforming Data (Angular 22)46 lectures • 4hr 3min

Lifecycle Hooks & Change Detection (Angular 22)25 lectures • 2hr 7min

Angular Signals - Angular's Reactive Premitive (Angular 22)46 lectures • 3hr 51min

Requirements

Description

Who this course is for: