CF

Angular - The Complete Guide

26h 25m 26s
English
Paid

Angular is one of the most popular web development frameworks you can learn these days, especially in the enterprise landscape. It offers amazing performance, a versatile syntax & API, a "batteries-included" philosophy where key features like routing are included, and an active and helpful community.

With this course, you'll learn Angular from the ground up and in great detail while building multiple demo projects. Concepts are explained and explored not just in theory but by applying your knowledge to real problems!

This is a comprehensive course because it covers everything you need to know and learn to become an Angular developer! Whether you know nothing about Angular or already have some basic Angular knowledge, you'll gain tons of useful information and knowledge from this course!

My goal with this course is to ensure that you feel confident working with Angular, whether you aim to apply for Angular jobs, use it in your projects, or enhance your developer portfolio—this course gets you there!

Course Outline

Getting Started

No prior Angular knowledge is required. The course begins with a thorough "Essentials" section that will get you up and running with Angular's core features within a few hours!

Deep Dive into Angular

After the "Essentials" section, the course offers a vast selection of "Deep Dive" sections that allow you to explore core and advanced Angular concepts and features.

You'll learn about:

  • Components, directives, signals, and change detection
  • Routing, sending HTTP requests, and more!

Since Angular has evolved since its original release in 2016, this course ensures you maximize it, no matter which Angular version you're using.

Modern & Legacy Angular

While the course focuses on the latest modern Angular syntax, it also covers older features and concepts to ensure you can apply your knowledge to any Angular version in future projects.

What's in the Course?

  • An introduction to Angular - what it is and why you would use it.
  • All the core essentials, including how Angular works, building components, and building UIs with Angular.
  • Dynamic data binding with and without signals, working with user events and state, and creating interactive applications.
  • How to use services to connect components or outsource data.
  • A comprehensive look behind the scenes to understand Angular's inner workings.
  • Detailed explanations on working with lists and conditional content.
  • Debugging Angular apps and styling with scoped styles.
  • Building and using components, directives, pipes, and more.
  • Sending HTTP requests and handling transitional states and responses.
  • Handling forms, user input, and validation.
  • Routing to create multi-page applications, deploying Angular, and an introduction to TypeScript.
  • And much more - check out the full curriculum on this page!

By the end of this course, you'll be able to use Angular confidently in your next projects!

Additional

https://github.com/mschwarzmueller/angular-complete-guide-course-resources

About the Author: Academind Pro (Maximilian Schwarzmüller)

Academind Pro (Maximilian Schwarzmüller) thumbnail

Academind is the teaching brand of Maximilian Schwarzmüller (Max) and Manuel Lorenz, two German developers whose Udemy catalog has become one of the largest single-instructor presences on that platform. Max in particular is widely cited as one of the clearest teachers of the JavaScript framework landscape — his Angular, React, Vue, and Node.js courses have collectively taught millions of students.

The Academind Pro platform extends beyond Udemy with deeper, more comprehensive courses aimed at developers building real applications rather than picking up syntax. Course material covers the full modern web stack: React (including Next.js), Vue, Angular, Node.js, NestJS, TypeScript, Docker, AWS, React Native, Flutter, and the broader full-stack JavaScript ecosystem.

The CourseFlix listing under this source carries over 25 Academind Pro courses spanning that range. Material is paid; Academind Pro runs on per-course pricing on the original platform. Courses are taught in Max's signature thorough, build-an-application-with-me style — long-form, deeply project-based, and continuously updated as the underlying frameworks evolve.

Watch Online 323 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 323 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Welcome To The Course!
All Course Lessons (323)
#Lesson TitleDurationAccess
1
Welcome To The Course! Demo
01:32
2
What Exactly Is Angular?
01:50
3
Why Would You Use Angular?
06:42
4
Angular's Evolution & Stability
04:45
5
Creating A New Angular Project
07:03
6
Setting Up An Angular Development Environment
04:49
7
About This Course
01:46
8
Module Introduction
01:20
9
A New Starting Project & Analyzing The Project Structure
06:28
10
Understanding Components & How Content Ends Up On The Screen
06:19
11
Creating a First Custom Component
05:15
12
Configuring the Custom Component
05:21
13
Using the Custom Component
06:09
14
Styling the Header Component & Adding An Image
06:21
15
Managing & Creating Components with the Angular CLI
04:29
16
Styling & Using Our Next Custom Component
05:09
17
Preparing User Data (To Output Dynamic Content)
02:08
18
Storing Data in a Component Class
03:56
19
Outputting Dynamic Content with String Interpolation
02:31
20
Property Binding & Outputting Computed Values
04:38
21
Using Getters For Computed Values
03:30
22
Listening to Events with Event Binding
04:05
23
Managing State & Changing Data
03:07
24
A Look Behind The Scenes Of Angular's Change Detection Mechanism
02:07
25
Introducing Signals
12:54
26
We Need More Flexible Components!
03:41
27
Defining Component Inputs
08:18
28
Required & Optional Inputs
02:57
29
Using Signal Inputs
14:01
30
We Need Custom Events!
01:48
31
Working with Outputs & Emitting Data
07:00
32
Using the output() Function
06:13
33
Adding Extra Type Information To EventEmitter
01:58
34
Exercise: Create a Configurable Component
08:48
35
TypeScript: Working With Potentially Undefined Values & Union Types
08:07
36
Accepting Objects As Inputs & Adding Appropriate Typings
04:47
37
TypeScript: Type Aliases & Interfaces
03:11
38
Outputting List Content
05:34
39
Outputting Conditional Content
04:27
40
Legacy Angular: Using ngFor & ngIf
05:22
41
Adding More Components to the Demo App
06:15
42
Outputting User-specific Tasks
06:31
43
Outputting Task Data in the Task Component
04:05
44
Storing Data Models in Separate Files
03:45
45
Dynamic CSS Styling with Class Bindings
04:37
46
More Component Communication: Deleting Tasks
05:26
47
Creating & Conditionally Rendering Another Component
05:25
48
Managing The "New Task" Dialog
06:31
49
Using Directives & Two-Way-Binding
10:47
50
Signals & Two-Way-Binding
02:20
51
Handling Form Submission
03:21
52
Using the Submitted Data
07:21
53
Content Projection with ng-content
06:48
54
Transforming Template Data with Pipes
03:17
55
Getting Started with Services
06:16
56
Getting Started with Dependency Injection
08:03
57
More Service Usage & Alternative Dependency Injection Mechanism
05:18
58
Time to Practice: Services
03:17
59
Using localStorage for Data Storage
05:41
60
Module Summary
08:46
61
Module Introduction
02:17
62
A First Introduction To Angular Modules (NgModule)
03:06
63
Creating a First Empty Module
02:57
64
Bootstrapping Apps with Angular Modules
05:22
65
Declaring & Using Components
04:47
66
A First Summary
02:15
67
Migrating All Components To Use Modules
06:51
68
Creating & Using Shared Modules
04:13
69
Creating More Complex Module-based App Structures
07:23
70
Module Introduction & Starting Project
05:20
71
Adding a Header Component With An Image
05:11
72
Adding a User Input Component
06:43
73
Handling Form Submission
02:30
74
Extracting Values with Two-Way-Binding
08:11
75
Calculating the Annual Investment Data
05:06
76
Cross-Component Communication with Outputs
09:26
77
Creating & Using a Data Model
02:59
78
Passing Data from Parent to Child with Inputs
10:10
79
Outputting Data in a Table
04:58
80
Formatting Output with a Pipe
01:40
81
Using Signals & Resetting The Form After Submission
09:56
82
Using a Service for Cross-Component Communication
09:36
83
Using Signals in Services
04:12
84
Migrating to Angular Modules
08:09
85
Module Summary
01:14
86
Module Introduction
01:42
87
Understanding Error Messages & Fixing Errors
03:47
88
Debugging Logical Errors with the Browser DevTools & Breakpoints
06:20
89
Exploring the Angular DevTools
03:51
90
Module Introduction
02:01
91
Starting Project & An Opportunity For Smaller Components?
02:35
92
When & How To Split Up Components
04:26
93
Splitting A Component Into Multiple Components
08:46
94
Creating Reusable Components
03:59
95
Component Inputs: Repetition
05:23
96
Property Binding: Repetition
08:32
97
Using Content Projection & ng-content
02:59
98
Adding Forms to Components
06:02
99
A Possible, But Not Ideal Way Of Extending Built-in Elements
04:28
100
Extending Built-in Elements with Custom Components via Attribute Selectors
05:09
101
Supporting Content Projection with Multiple Slots
06:33
102
Exploring Advanced Content Projection
03:11
103
Defining Content Projection Fallbacks
02:10
104
Multi-Element Custom Components & Content Projection
07:29
105
Scoping CSS Styles to Components
05:04
106
Understanding & Configuring View Encapsulation
05:23
107
Making Sense of Component Host Elements
02:53
108
Using Host Elements Like Regular Elements
04:31
109
Interacting With Host Elements From Inside Components
02:07
110
When (Not) To Rely On Host Elements
06:09
111
Interacting with Host Elements via @HostListener & @HostBinding
05:15
112
Accessing Host Elements Programmatically
04:04
113
Class Bindings: Repetition
04:25
114
There's More Than One Way Of Binding CSS Classes Dynamically
03:17
115
A Closer Look At Dynamic Inline Style Binding
03:31
116
Manipulating State & Using Literal Values
04:43
117
Introducing the Component Lifecycle: ngOnInit
04:03
118
Implementing Lifecycle Interfaces
03:12
119
Component Lifecycle - A Deep Dive
15:17
120
Component Cleanup with ngOnDestroy
04:08
121
Component Cleanup with DestroyRef
02:48
122
Handling Form Submissions: Repetition
02:47
123
Working with Template Variables
07:14
124
Extracting Input Values via Template Variables
01:55
125
Template Variables & Component Instances
02:36
126
Getting Access to Template Elements via ViewChild
09:28
127
Using The viewChild Signal Function
06:23
128
ViewChild vs ContentChild
06:59
129
A Closer Look at Decorator-based Queries & Lifecycle Hooks
04:58
130
The afterRender and afterNextRender Lifecycle Functions
03:09
131
Making Sense of Signal Effects
05:29
132
TypeScript & Type Models: Repetition
03:32
133
Component Outputs: Repetition
04:24
134
A Closer Look At Template For Loops
05:54
135
Revisiting Inputs & Signals
05:01
136
Updating Signal Values
04:51
137
Cross-Component Communication & State Management
06:14
138
Configuring Component Inputs & Outputs
04:07
139
Two-Way Binding: Repetition
03:56
140
Setting Up Custom Two-Way Binding
08:55
141
An Easier Way of Setting Up Custom Two-Way Binding
03:54
142
Module Introduction
01:04
143
Understanding Directives
02:58
144
The Starting Project
01:05
145
Analyzing a Built-in Attribute Directive: ngModel
05:42
146
Analyzing a Built-in Structural Directive: ngIf
06:30
147
Getting Started with Custom Directives
08:11
148
Using Attribute Directives To Change Element Behavior
04:48
149
Working with Inputs in Custom Directives
08:52
150
Directives & Dependency Injection
04:10
151
Building Another Directive
07:57
152
Building a Custom Structural Directive
08:23
153
Structural Directives & Syntactic Sugar
03:08
154
Host Directives & Composition
08:00
155
Module Introduction
00:37
156
Making Sense of Pipes
02:56
157
Using Built-in Pipes
02:57
158
More Built-in Pipes Examples
04:19
159
Building a First Custom Pipe
05:58
160
Using Custom Pipes to Perform Custom Transformations
03:50
161
Accepting Parameters in Custom Pipes
05:58
162
Chaining Pipes & Being Aware of Limitations
04:45
163
Building a Pipe That Sorts Items
06:46
164
Understanding How Pipes Are Executed
04:15
165
Pure & Impure Pipes
01:45
166
Pipe Limitations & When Not To Use Them
02:54
167
The Starting Project & The Need For A Centralized Service
03:15
168
Module Introduction
00:59
169
Creating a Service
07:28
170
How NOT To Provide A Service
02:24
171
Using Angular's Dependency Injection Mechanism
05:02
172
Using The Alternative Dependency Injection Syntax
05:28
173
Outsourcing & Reusing Logic with Services
10:57
174
Angular Has Multiple Injectors!
04:24
175
There Are Multiple Ways Of Providing a Service
04:17
176
Providing Services via the Element Injector
03:17
177
Understanding the Element Injector's Behavior
03:45
178
Injecting Services Into Services
05:27
179
Analyzing Dependency Injection with the Angular DevTools
02:30
180
Using Custom DI Tokens & Providers
08:28
181
Preparing A Non-Class Value For Injection
05:25
182
Injecting Other Values (NOT Services)
10:26
183
Angular Modules (NgModule) & Dependency Injection
03:06
184
Working with Services Without Using Signals
02:17
185
Module Introduction
01:53
186
Analyzing the Starting Project
01:53
187
Understanding How Angular Performs Change Detection
04:45
188
Change Detection During Development: ExpressionChangedAfterChecked Errors
02:46
189
Writing Efficient Template Bindings
01:20
190
Avoiding Zone Pollution
05:19
191
Using the OnPush Strategy
03:22
192
Understanding the OnPush Strategy
08:38
193
Working with OnPush & Signals
02:14
194
Using Signals for Sharing Data Across Components (with OnPush)
04:12
195
The Problem With OnPush, Cross-Component Data & Not Using Signals
03:13
196
Triggering Change Detection Manually & Using RxJS Subjects
11:02
197
Introducing The async Pipe
04:33
198
Going Zoneless!
12:59
199
Module Introduction
00:53
200
What Are Observables & What Is RxJS?
01:08
201
Creating & Using an Observable
09:18
202
Working with RxJS Operators
05:35
203
Working with Signals
05:14
204
Signals vs Observables
06:01
205
Converting Signals To Observables
03:50
206
Converting Observables To Signals
04:54
207
Deep Dive: Creating & Using A Custom Observable From Scratch
12:25
208
Module Summary
02:39
209
Module Introduction
01:29
210
The Starting Projects: Frontend & Backend
04:43
211
How To Connect Angular Apps To A Backend
04:03
212
Getting Started with Angular's Http Client
04:24
213
Sending a GET Request To Fetch Data
07:54
214
Configuring Http Requests
03:40
215
Transforming & Using Response Data
02:52
216
Showing a Loading Fallback
03:12
217
Handling HTTP Errors
10:46
218
Sending Data To A Backend
07:10
219
More Data Fetching & Some Code Duplication
04:35
220
Outsourcing HTTP Request Logic Into A Service
08:59
221
Managing HTTP-loaded Data via a Service
04:55
222
Implementing Optimistic Updating
02:42
223
Potential Problems Introduced by Optimistic Updating
02:07
224
Improved Optimistic Updating
05:10
225
Implementing App-wide Error Management
11:11
226
Practice: Sending DELETE Requests
08:25
227
Introducing HTTP Interceptors
06:58
228
Introducing HTTP Response Interceptors
03:04
229
Template-driven vs Reactive Forms
02:54
230
Module Introduction
02:28
231
Template-driven: Registering Form Controls
06:01
232
Getting Access to the Angular-managed Form
08:32
233
Extracting User Input Values
02:47
234
Validating Input with Form Validation Directives
06:10
235
Using the Form Validation Status To Provide User Feedback
07:34
236
Adding Validation Styles
04:46
237
Interacting With The Underlying Form Object In The Component
13:11
238
Updating Form Values Programmatically
05:30
239
Reactive Forms: Getting Started
05:19
240
Syncing Reactive Form Definition & Template
03:37
241
Handling Form Submission (Reactive Forms)
03:16
242
Adding Validators To Reactive Forms
06:36
243
Building Custom Validators
05:22
244
Creating & Using Async Validators
03:55
245
Interacting with the Form Programmatically
08:39
246
Exercise: Problem
02:19
247
Exercise: Solution
04:38
248
Connecting & Registering Inputs For A Complex Form
08:59
249
Working with Nested Form Groups
05:30
250
Working with Form Arrays
04:45
251
Practice: Adding More Validation
03:32
252
Creating Multi-Input Validators / Form Group Validators
07:51
253
Module Summary
01:31
254
Module Introduction
01:58
255
What Is Routing?
02:36
256
Enabling Routing & Adding a First Route
06:16
257
Rendering Routes
03:35
258
Registering Multiple Routes
03:15
259
Adding Links The Right Way
05:51
260
Styling Active Navigation Links
02:54
261
Setting Up & Navigating To Dynamic Routes
07:24
262
Extracting Dynamic Route Parameters via Inputs
05:34
263
Extracting Dynamic Route Parameters via Observables
08:00
264
Working with Nested Routes
05:31
265
Route Links & Relative Links
02:36
266
Accessing Parent Route Data From Inside Nested Routes
04:33
267
Loading Data Based On Route Parameters In Child Routes
02:15
268
Link Shortcuts & Programmatic Navigation
06:38
269
Adding A "Not Found" Route
01:47
270
Redirecting Users
05:10
271
Splitting Route Definitions Across Multiple Files
02:51
272
Activated Route vs Activated Route Snapshot
03:39
273
Setting Query Parameters
05:36
274
Extracting Query Parameters via Inputs
03:17
275
Extracting Query Parameters via Observables
03:23
276
Using Query Parameters For Data Manipulation
03:38
277
Adding Static Data To Routes
05:07
278
Resolving Route-related Dynamic Data
11:23
279
Accessing Route Data In Components
02:47
280
Controlling Route Resolver Execution
03:09
281
Setting & Resolving Titles
04:15
282
Introducing Route Guards
09:19
283
Making Sense of The CanDeactivate Guard
04:57
284
Improving The CanDeactivate Logic
03:00
285
Reloading Pages via the Angular Router & Configuring Programmatic Navigation
05:47
286
Module Introduction
01:05
287
What Is Lazy Loading / Code Splitting?
01:37
288
Introducing Route-based Lazy Loading
02:50
289
Implementing Route-based Lazy Loading
08:15
290
Lazy Loading Entire Route Groups
05:20
291
Using Lazy Loading & Routing to Lazy-load Services
03:59
292
Introducing Deferrable Views
03:10
293
Defer Loading Until Viewport Visibility
03:48
294
Deferrable Views: Using Other Triggers
01:37
295
Prefetching Lazy-loaded Code
02:00
296
Deferrable Views: Summary
02:07
297
Module Introduction
01:09
298
Preparing a Project For Deployment: Building It For Production
04:57
299
Building SPAs: Pros & Cons
03:43
300
SPAs: Deployment Example
07:55
301
Using "ng add", "ng deploy" & Angular's Built-in Deployment Support
02:17
302
Server-side Rendering (SSR) Introduction
03:40
303
Setting Up SSR For An Angular App
04:13
304
Building and Service an SSR App
02:37
305
Authoring SSR-ready Code (Beware of Pitfalls!)
03:54
306
SSR and Client-Server Mismatches
03:38
307
Static Site Generation (SSG) Introduction
02:56
308
Configuring & Using SSG
05:35
309
Deployment Methods - A Summary
00:55
310
Course Roundup
01:49
311
Module Introduction
01:16
312
What & Why?
06:33
313
Installing & Using TypeScript
06:23
314
Base Types & Primitives
03:56
315
Array & Object Types
05:34
316
Type Inference
02:48
317
Working with Union Types
02:49
318
Assigning Type Aliases
02:43
319
Diving into Functions & Function Types
05:13
320
Understanding Generics
07:21
321
Classes & TypeScript
07:59
322
Working with Interfaces
05:37
323
Configuring the TypeScript Compiler
02:30
Unlock unlimited learning

Get instant access to all 322 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What is Angular - The Complete Guide about?
Angular is one of the most popular web development frameworks you can learn these days, especially in the enterprise landscape. It offers amazing performance, a versatile syntax & API, a "batteries-included" philosophy where key features…
Who teaches this course?
It is taught by Academind Pro (Maximilian Schwarzmüller). You can find more courses by this instructor on the corresponding source page.
How long is the course?
It contains 323 lessons with a total runtime of 26 hours 25 minutes. Every lesson is available to watch online at your own pace.
Is it free to watch?
It is part of CourseFlix's premium catalog. A subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch it online?
The course is available to watch online on CourseFlix at https://courseflix.net/course/angular-the-complete-guide. The page hosts every lesson with the integrated video player; no download is required.