Angular - The Complete Guide

26h 25m 26s
English
Paid
June 21, 2024

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.

And with this course, you'll learn Angular from the ground up and in great detail - all whilst building multiple demo projects. Therefore, concepts are explained & explored not just in theory, but instead by applying your knowledge to real problems!

This is a huge course because it really covers EVERYTHING you need to know and learn to become an Angular developer!

No matter if you know nothing about Angular or if you already got some basic Angular knowledge (not required but also not a problem), you will get tons of useful information and knowledge out of this course!

Because my goal with this course is to ensure that you feel confident working with Angular, so that you can apply for Angular jobs, use it in your own projects or simply enhance your portfolio as a developer - whatever your goal is: This course gets you there!

For this course, no prior Angular knowledge is required - instead, the course starts with a very thorough "Essentials" section that will get you up and running with Angular's core features in just a few hours!

More

But, of course, this course doesn't stop there!

After finishing the "Essentials" sections, the course offers a vast selection of "Deep Dive" sections that allows you to dive deeper into core and advanced Angular concepts & features. You'll learn all about components, directives, signals, change detection, routing, sending HTTP requests and much, much more!

But Angular has also changed since its original release back in 2016. And this course ensures that you get the most out of it, no matter which Angular version you're using!

Whilst the course does focus on the latest & most modern Angular syntax and teach that as a default, it also covers older Angular features and concepts so that you'll be able to use your knowledge no matter which Angular version you might be using in your upcoming projects.

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

What's in this course?

  • A thorough introduction to Angular (What is it and why would you use it?)
  • All the core essentials: How Angular works, building components with Angular & building UIs with Angular
  • Components, inputs, outputs & dynamic data binding (with and without signals)
  • Working with user events and state to create interactive applications
  • How to use crucial concepts like services to connect components or outsource data
  • A (thorough) look behind the scenes to understand how Angular works under the hood
  • Detailed explanations on how to work with lists and conditional content
  • How to debug Angular apps
  • Styling Angular apps with scoped styles
  • Building and using components, directives, pipes & more
  • Sending Http requests & handling transitional states + responses
  • Handling forms and user input (incl. validation)
  • Routing to create multi-page applications
  • Deploying Angular
  • TypeScript Introduction
  • And so much more - check out the full curriculum on this page!

Watch Online Angular - The Complete Guide

Join premium to watch
Go to premium
# Title Duration
1 Welcome To The Course! 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

Similar courses to Angular - The Complete Guide

Build Fullstack Trello clone: WebSocket, Socket IO

Build Fullstack Trello clone: WebSocket, Socket IOudemy

Duration 8 hours 49 minutes 48 seconds
Complete Angular Developer in 2025 Zero to Mastery
Building Your First App with Spring Boot and Angular
Angular Pro

Angular Proultimatecourses.com

Duration 16 hours 41 minutes 46 seconds
Full Stack: Angular and Spring Boot

Full Stack: Angular and Spring Bootudemy

Duration 25 hours 49 minutes 54 seconds
Build an app with ASPNET Core and Angular from scratch

Build an app with ASPNET Core and Angular from scratchudemy

Duration 29 hours 51 minutes 36 seconds
Angular NgRx: Getting Started

Angular NgRx: Getting Startedpluralsight

Duration 4 hours 5 minutes 32 seconds
Desktop apps with Angular, Firestore and Electron

Desktop apps with Angular, Firestore and Electronudemy

Duration 11 hours 28 minutes 39 seconds
React, Angular, Node In-Depth Guide: Beginner to Pro

React, Angular, Node In-Depth Guide: Beginner to Proudemy

Duration 80 hours 1 minute 57 seconds
Reactive Angular Course (with RxJs)

Reactive Angular Course (with RxJs)udemy

Duration 5 hours 33 minutes 49 seconds