01 Getting Started
-
001 Course Introduction (0:57)
-
002 What is Angular_ (1:59)
-
003 Join our Online Learning Community
-
004 Angular vs Angular 2 vs Latest Angular Version (3:49)
-
005 CLI Deep Dive & Troubleshooting
-
006 Fixing Errors With New Angular Projects
-
007 Project Setup and First App (8:45)
-
008 Editing the First App (10:05)
-
009 The Course Structure (4:00)
-
010 How to get the Most out of the Course (2:25)
-
011 What is TypeScript_ (2:09)
-
012 Optional_ TypeScript Quick Introduction
-
013 A Basic Project Setup using Bootstrap for Styling (4:27)
-
014 About the Course Code _ Code Snapshots
02 The Basics
-
015 Module Introduction (0:56)
-
016 How an Angular App gets Loaded and Started (7:11)
-
017 Components are Important! (3:08)
-
018 Creating a New Component (6:51)
-
019 Understanding the Role of AppModule and Component Declaration (5:15)
-
020 Using Custom Components (1:12)
-
021 Creating Components with the CLI & Nesting Components (3:50)
-
022 Working with Component Templates (3:08)
-
023 Working with Component Styles (4:02)
-
024 Fully Understanding the Component Selector (3:50)
-
025 [assignment] Practicing Components (1)
-
025 [assignment_video] Practicing Components (1:33)
-
025 [OPTIONAL] Assignment Solution (6:42)
-
026 What is Databinding_ (2:49)
-
027 String Interpolation (5:19)
-
028 Property Binding (6:33)
-
029 Property Binding vs String Interpolation (3:07)
-
030 Event Binding (4:09)
-
031 Bindable Properties and Events
-
032 Passing and Using Data with Event Binding (4:37)
-
033 Important_ FormsModule is Required for Two-Way-Binding!
-
034 Two-Way-Databinding (2:47)
-
035 Combining all Forms of Databinding (1:46)
-
036 [assignment_video] Practicing Databinding (1:07)
-
036 [assignment] Practicing Databinding
-
036 [OPTIONAL] Assignment Solution (5:12)
-
037 Understanding Directives (2:17)
-
038 Using ngIf to Output Data Conditionally (3:52)
-
039 Enhancing ngIf with an Else Condition (2:46)
-
040 Styling Elements Dynamically with ngStyle (5:01)
-
041 Applying CSS Classes Dynamically with ngClass (2:53)
-
042 Outputting Lists with ngFor (3:43)
-
043 [assignment_video] Practicing Directives (2:15)
-
043 [assignment] Practicing Directives
-
043 [OPTIONAL] Assignment Solution (7:06)
-
044 Getting the Index when using ngFor (2:52)
03 Course Project - The Basics
-
045 Project Introduction (1:04)
-
046 Planning the App (5:33)
-
047 Installing Bootstrap Correctly
-
048 Setting up the Application (4:31)
-
049 Creating the Components (9:32)
-
050 Using the Components (3:15)
-
051 Adding a Navigation Bar (5:09)
-
052 Alternative Non-Collapsable Navigation Bar
-
053 Creating a _Recipe_ Model (4:33)
-
054 Adding Content to the Recipes Components (7:41)
-
055 Outputting a List of Recipes with ngFor (4:37)
-
056 Displaying Recipe Details (5:52)
-
057 Working on the ShoppingListComponent (1:49)
-
058 Creating an _Ingredient_ Model (2:35)
-
059 Creating and Outputting the Shopping List (2:27)
-
060 Adding a Shopping List Edit Section (3:28)
-
061 Wrap Up & Next Steps (0:54)
04 Debugging
05 Components & Databinding Deep Dive
-
064 Module Introduction (0:36)
-
065 Splitting Apps into Components (5:56)
-
066 Property & Event Binding Overview (1:44)
-
067 Binding to Custom Properties (5:43)
-
068 Assigning an Alias to Custom Properties (1:59)
-
069 Binding to Custom Events (9:05)
-
070 Assigning an Alias to Custom Events (0:57)
-
071 Custom Property and Event Binding Summary (2:02)
-
072 Understanding View Encapsulation (4:59)
-
073 More on View Encapsulation (2:43)
-
074 Using Local References in Templates (4:36)
-
075 @ViewChild() in Angular 8+
-
076 Getting Access to the Template & DOM with @ViewChild (5:02)
-
077 Projecting Content into Components with ng-content (3:22)
-
078 lifecycle
-
078 Understanding the Component Lifecycle (4:54)
-
079 Seeing Lifecycle Hooks in Action (11:54)
-
080 Lifecycle Hooks and Template Access (2:33)
-
081 @ContentChild() in Angular 8+
-
082 Getting Access to ng-content with @ContentChild (3:00)
-
083 Wrap Up (0:49)
-
084 [assignment] Practicing Property & Event Binding and View Encapsulation
-
084 [assignment_video] Practicing Property & Event Binding and View Encapsulation (2:17)
-
084 [OPTIONAL] Assignment Solution (12:21)
06 Course Project - Components & Databinding
-
085 Introduction (0:50)
-
086 Adding Navigation with Event Binding and ngIf (7:31)
-
087 Passing Recipe Data with Property Binding (4:43)
-
088 Passing Data with Event and Property Binding (Combined) (10:31)
-
089 Make sure you have FormsModule added!
-
090 Allowing the User to Add Ingredients to the Shopping List (7:22)
07 Directives Deep Dive
-
091 Module Introduction (1:23)
-
092 ngFor and ngIf Recap (3:36)
-
093 ngClass and ngStyle Recap (2:56)
-
094 Creating a Basic Attribute Directive (6:42)
-
095 Using the Renderer to build a Better Attribute Directive (7:04)
-
096 More about the Renderer
-
097 Using HostListener to Listen to Host Events (2:59)
-
098 Using HostBinding to Bind to Host Properties (3:17)
-
099 Binding to Directive Properties (6:43)
-
100 What Happens behind the Scenes on Structural Directives (3:04)
-
101 Building a Structural Directive (6:13)
-
102 Understanding ngSwitch (2:49)
08 Course Project - Directives
09 Using Services & Dependency Injection
-
105 Module Introduction (1:39)
-
106 Why would you Need Services_ (2:04)
-
107 Creating a Logging Service (3:32)
-
108 Injecting the Logging Service into Components (6:21)
-
109 Creating a Data Service (6:41)
-
110 Understanding the Hierarchical Injector (2:40)
-
111 How many Instances of Service Should It Be_ (2:12)
-
112 Injecting Services into Services (5:13)
-
113 Using Services for Cross-Component Communication (4:06)
-
114 Services in Angular 6+
-
115 [assignment] Practicing Services
-
115 [assignment_video] Practicing Services (1:44)
-
115 [OPTIONAL] Assignment Solution (9:37)
10 Course Project - Services & Dependency Injection
-
116 Introduction (1:23)
-
117 Setting up the Services (1:15)
-
118 Managing Recipes in a Recipe Service (4:07)
-
119 Using a Service for Cross-Component Communication (5:07)
-
120 Adding the Shopping List Service (5:04)
-
121 Using Services for Pushing Data from A to B (3:08)
-
122 Adding Ingredients to Recipes (3:41)
-
123 Passing Ingredients from Recipes to the Shopping List (via a Service) (7:03)
11 Changing Pages with Routing
-
124 Module Introduction (1:26)
-
125 Why do we need a Router_ (1:15)
-
126 Understanding the Example Project
-
127 Setting up and Loading Routes (8:01)
-
128 Navigating with Router Links (5:18)
-
129 Understanding Navigation Paths (4:54)
-
130 Styling Active Router Links (5:01)
-
131 Navigating Programmatically (3:28)
-
132 Using Relative Paths in Programmatic Navigation (5:09)
-
133 Passing Parameters to Routes (3:10)
-
134 Fetching Route Parameters (4:01)
-
135 Fetching Route Parameters Reactively (7:25)
-
136 An Important Note about Route Observables (2:42)
-
137 Passing Query Parameters and Fragments (5:53)
-
138 Retrieving Query Parameters and Fragments (3:15)
-
139 Practicing and some Common Gotchas (6:07)
-
140 Setting up Child (Nested) Routes (4:28)
-
141 Using Query Parameters - Practice (5:36)
-
142 Configuring the Handling of Query Parameters (1:50)
-
143 Redirecting and Wildcard Routes (4:36)
-
144 Important_ Redirection Path Matching
-
145 Outsourcing the Route Configuration (4:40)
-
146 An Introduction to Guards (1:45)
-
147 Protecting Routes with canActivate (8:55)
-
148 Protecting Child (Nested) Routes with canActivateChild (2:51)
-
149 Using a Fake Auth Service (1:43)
-
150 Controlling Navigation with canDeactivate (12:28)
-
151 Passing Static Data to a Route (5:56)
-
152 Resolving Dynamic Data with the resolve Guard (9:53)
-
153 Understanding Location Strategies (4:43)
-
154 Wrap Up (0:51)
12 Course Project - Routing
-
155 Planning the General Structure (1:36)
-
156 Setting Up Routes (7:58)
-
157 Adding Navigation to the App (1:41)
-
158 Marking Active Routes (1:30)
-
159 Fixing Page Reload Issues (2:51)
-
160 Child Routes_ Challenge (1:54)
-
161 Adding Child Routing Together (4:21)
-
162 Configuring Route Parameters (6:22)
-
163 Passing Dynamic Parameters to Links (3:01)
-
164 Styling Active Recipe Items (1:14)
-
165 Adding Editing Routes (3:44)
-
166 Retrieving Route Parameters (3:19)
-
167 Programmatic Navigation to the Edit Page (4:46)
-
168 One Note about Route Observables (0:52)
-
169 prj-routing-final
-
169 Project Cleanup (1)
13 Understanding Observables
-
170 Module Introduction (4:25)
-
171 Analyzing Angular Observables (2:15)
-
172 Getting Closer to the Core of Observables (6:50)
-
173 Building a Custom Observable (4:46)
-
174 Errors & Completion (6:39)
-
175 Observables & You! (1:55)
-
176 Understanding Operators (8:39)
-
177 Subjects (8:17)
-
178 Wrap Up (1:15)
-
179 Useful Resources & Links
14 Course Project - Observables
15 Handling Forms in Angular Apps
-
182 Module Introduction (1:19)
-
183 Why do we Need Angular's Help_ (2:21)
-
184 Template-Driven (TD) vs Reactive Approach (1:16)
-
185 An Example Form (1:32)
-
186 TD_ Creating the Form and Registering the Controls (5:42)
-
187 TD_ Submitting and Using the Form (6:15)
-
188 TD_ Understanding Form State (2:29)
-
189 TD_ Accessing the Form with @ViewChild (3:03)
-
190 TD_ Adding Validation to check User Input (4:14)
-
191 Built-in Validators & Using HTML5 Validation
-
192 TD_ Using the Form State (4:27)
-
193 TD_ Outputting Validation Error Messages (2:23)
-
194 TD_ Set Default Values with ngModel Property Binding (2:15)
-
195 TD_ Using ngModel with Two-Way-Binding (2:48)
-
196 TD_ Grouping Form Controls (3:30)
-
197 TD_ Handling Radio Buttons (3:27)
-
198 TD_ Setting and Patching Form Values (4:42)
-
199 TD_ Using Form Data (4:44)
-
200 TD_ Resetting Forms (1:47)
-
201 [assignment_video] Practicing Template-Driven Forms (1:15)
-
201 Introduction to the Reactive Approach (0:40)
-
201 [assignment] Practicing Template-Driven Forms
-
202 Reactive_ Setup (2:26)
-
203 Reactive_ Creating a Form in Code (4:07)
-
204 Reactive_ Syncing HTML and Form (3:58)
-
205 Reactive_ Submitting the Form (2:15)
-
206 Reactive_ Adding Validation (2:50)
-
207 Reactive_ Getting Access to Controls (3:47)
-
208 Reactive_ Grouping Controls (3:46)
-
209 Fixing a Bug
-
210 Reactive_ Arrays of Form Controls (FormArray) (7:31)
-
211 Reactive_ Creating Custom Validators (6:11)
-
212 Reactive_ Using Error Codes (3:20)
-
213 Reactive_ Creating a Custom Async Validator (4:38)
-
214 Reactive_ Reacting to Status or Value Changes (2:11)
-
215 Reactive_ Setting and Patching Values (2:09)
-
216 [assignment_video] Practicing Reactive Forms (1:04)
-
216 [OPTIONAL] Assignment Solution (13:48)
-
216 [assignment] Practicing Reactive Forms
16 Course Project - Forms
-
217 Introduction (0:59)
-
218 TD_ Adding the Shopping List Form (3:42)
-
219 Adding Validation to the Form (2:21)
-
220 Allowing the Selection of Items in the List (4:24)
-
221 Loading the Shopping List Items into the Form (3:02)
-
222 Updating existing Items (3:15)
-
223 Resetting the Form (2:34)
-
224 Allowing the the User to Clear (Cancel) the Form (1:16)
-
225 Allowing the Deletion of Shopping List Items (2:52)
-
226 Creating the Template for the (Reactive) Recipe Edit Form (4:59)
-
227 Creating the Form For Editing Recipes (5:06)
-
228 Syncing HTML with the Form (3:52)
-
229 Fixing a Bug
-
230 Adding Ingredient Controls to a Form Array (5:39)
-
231 Adding new Ingredient Controls (3:38)
-
232 Validating User Input (5:10)
-
233 Submitting the Recipe Edit Form (7:30)
-
234 Adding a Delete and Clear (Cancel) Functionality (4:46)
-
235 Redirecting the User (after Deleting a Recipe) (1:47)
-
236 Adding an Image Preview (1:48)
-
237 Providing the Recipe Service Correctly (1:58)
-
238 Deleting Ingredients and Some Finishing Touches (3:34)
-
239 Deleting all Items in a FormArray
17 Using Pipes to Transform Output
-
240 Introduction & Why Pipes are Useful (2:01)
-
241 Using Pipes (3:28)
-
242 Parametrizing Pipes (2:10)
-
243 Where to learn more about Pipes (1:56)
-
244 Chaining Multiple Pipes (2:20)
-
245 Creating a Custom Pipe (6:42)
-
246 Parametrizing a Custom Pipe (2:36)
-
247 Example_ Creating a Filter Pipe (7:01)
-
248 Pure and Impure Pipes (or_ How to _fix_ the Filter Pipe) (4:46)
-
249 Understanding the _async_ Pipe (4:03)
-
250 [assignment_video] Practicing Pipes (1:13)
-
250 [assignment] Practicing Pipes
18 Making Http Requests
-
250 A New IDE (0:43)
-
251 Module Introduction (1:06)
-
252 How Does Angular Interact With Backends_ (3:09)
-
253 The Anatomy of a Http Request (2:27)
-
254 Backend (Firebase) Setup (2:34)
-
255 Sending a POST Request (10:11)
-
256 GETting Data (2:56)
-
257 Using RxJS Operators to Transform Response Data (3:59)
-
258 Using Types with the HttpClient (5:07)
-
259 Outputting Posts (2:15)
-
260 Showing a Loading Indicator (2:03)
-
261 Using a Service for Http Requests (6:37)
-
262 Services & Components Working Together (3:28)
-
263 Sending a DELETE Request (3:27)
-
264 Handling Errors (6:38)
-
265 Using Subjects for Error Handling (2:39)
-
266 Using the catchError Operator (2:13)
-
267 Error Handling & UX (2:07)
-
268 Setting Headers (3:18)
-
269 Adding Query Params (4:01)
-
270 Observing Different Types of Responses (7:32)
-
271 Changing the Response Body Type (3:16)
-
272 Introducing Interceptors (7:24)
-
273 Manipulating Request Objects (2:32)
-
274 Response Interceptors (2:46)
-
275 Multiple Interceptors (4:52)
-
276 Wrap Up (1:57)
-
277 Useful Resources & Links
19 Course Project - Http
20 Authentication & Route Protection in Angular
-
286 Module Introduction (0:52)
-
287 How Authentication Works (5:01)
-
288 Adding the Auth Page (6:44)
-
289 Switching Between Auth Modes (4:02)
-
290 Handling Form Input (3:44)
-
291 Preparing the Backend (3:14)
-
292 Make sure you got Recipes in your backend!
-
293 Preparing the Signup Request (8:24)
-
294 Sending the Signup Request (4:36)
-
295 Adding a Loading Spinner & Error Handling Logic (6:34)
-
296 Improving Error Handling (5:39)
-
297 Sending Login Requests (6:00)
-
298 Login Error Handling (4:28)
-
299 Creating & Storing the User Data (10:16)
-
300 Reflecting the Auth State in the UI (9:41)
-
301 Adding the Token to Outgoing Requests (10:15)
-
302 Attaching the Token with an Interceptor (8:48)
-
303 Adding Logout (3:18)
-
304 Adding Auto-Login (9:54)
-
305 Adding Auto-Logout (7:39)
-
306 Adding an Auth Guard (10:56)
-
307 Wrap Up (1:55)
-
308 Useful Resources & Links
21 Dynamic Components
-
309 Module Introduction (1:09)
-
310 Adding an Alert Modal Component (7:33)
-
311 Understanding the Different Approaches (2:28)
-
312 Using ngIf (3:05)
-
313 Preparing Programmatic Creation (8:27)
-
314 Creating a Component Programmatically (4:46)
-
315 Understanding entryComponents (5:06)
-
316 Data Binding & Event Binding (5:05)
-
317 Wrap Up (1:25)
-
318 Useful Resources & Links
22 Angular Modules & Optimizing Angular Apps
-
319 Module Introduction (0:41)
-
320 What are Modules_ (2:26)
-
321 Analyzing the AppModule (6:24)
-
322 Getting Started with Feature Modules (8:59)
-
323 Splitting Modules Correctly (4:09)
-
324 Adding Routes to Feature Modules (4:34)
-
325 Component Declarations (1:58)
-
326 The ShoppingList Feature Module (4:27)
-
327 Understanding Shared Modules (8:10)
-
328 Understanding the Core Module (5:48)
-
329 Adding an Auth Feature Module (4:22)
-
330 Understanding Lazy Loading (2:52)
-
331 Implementing Lazy Loading (12:20)
-
332 More Lazy Loading (3:02)
-
333 Preloading Lazy-Loaded Code (3:39)
-
334 Modules & Services (5:46)
-
335 Loading Services Differently (8:24)
-
336 Ahead-of-Time Compilation (9:49)
-
337 Wrap Up (0:49)
-
338 Useful Resources & Links
23 Deploying an Angular App
24 Bonus_ Working with NgRx in our Project
-
344 Module Introduction (0:46)
-
345 What is Application State_ (9:07)
-
346 What is NgRx_ (6:55)
-
347 Getting Started with Reducers (6:44)
-
348 Adding Logic to the Reducer (5:47)
-
349 Understanding & Adding Actions (6:16)
-
350 Setting Up the NgRx Store (4:48)
-
351 Selecting State (8:51)
-
352 Dispatching Actions (7:09)
-
353 Multiple Actions (9:37)
-
354 Preparing Update & Delete Actions (3:08)
-
355 Updating & Deleting Ingredients (10:59)
-
356 Expanding the State (9:17)
-
357 Managing More State via NgRx (9:52)
-
358 Removing Redundant Component State Management (3:32)
-
359 First Summary & Clean Up (5:25)
-
360 One Root State (11:39)
-
361 Setting Up Auth Reducer & Actions (8:25)
-
362 Dispatching Auth Actions (5:53)
-
363 Auth Finished (For Now...) (6:43)
-
364 And Important Note on Actions (6:24)
-
365 Exploring NgRx Effects (3:38)
-
366 Defining the First Effect (5:19)
-
367 Effects & Error Handling (8:57)
-
368 Login via NgRx Effects (9:08)
-
369 Managing UI State in NgRx (7:30)
-
370 Finishing the Login Effect (7:11)
-
371 Preparing Other Auth Actions (4:09)
-
372 Adding Signup (6:17)
-
373 Further Auth Effects (6:13)
-
374 Adding Auto-Login with NgRx (8:16)
-
375 Adding Auto-Logout (6:31)
-
376 Finishing the Auth Effects (2:29)
-
377 Using the Store Devtools (6:20)
-
378 The Router Store (2:11)
-
379 Getting Started with NgRx for Recipes (11:03)
-
380 Fetching Recipe Detail Data (9:14)
-
381 Fetching Recipes & Using the Resolver (12:00)
-
382 Fixing the Auth Redirect (2:10)
-
383 Update, Delete and Add Recipes (15:11)
-
384 Storing Recipes via Effects (5:52)
-
385 Cleanup Work (1:58)
-
386 Wrap Up (2:12)
-
387 Alternative NgRx Syntax
-
388 Useful Resources & Links
25 Bonus_ Angular Universal
-
389 Module Introduction (3:04)
-
390 Angular Universal & ModuleMapLoader
-
391 Adding Angular Universal (10:01)
-
392 Adding Angular Universal with NestJS (6:18)
-
393 Deploying Universal Apps
-
394 Important_ Remaining Lectures
-
395 Module Introduction (1:40)
-
396 Getting Started with Angular Universal (1:31)
-
397 Working on the App Module (4:02)
-
398 Adding a Server-Side Build Workflow (4:55)
-
399 Adding a NodeJS Server (8:26)
-
400 Pre-Rendering the App on the Server (4:11)
-
401 Next Steps (1:38)
-
402 Angular Universal Gotchas
26 Angular Animations
-
403 Making Animations Work with Angular 4+
-
404 Introduction (1:03)
-
405 Setting up the Starting Project (0:52)
-
406 Animations Triggers and State (7:11)
-
407 Switching between States (2:04)
-
408 Transitions (1:54)
-
409 Advanced Transitions (5:21)
-
410 Transition Phases (3:57)
-
411 The _void_ State (6:10)
-
412 Using Keyframes for Animations (5:32)
-
413 Grouping Transitions (2:11)
-
414 Using Animation Callbacks (2:38)
27 Adding Offline Capabilities with Service Workers
28 A Basic Introduction to Unit Testing in Angular Apps
-
420 About this Section
-
421 Introduction (1:18)
-
422 Why Unit Tests_ (2:12)
-
423 Analyzing the Testing Setup (as created by the CLI) (8:01)
-
424 Running Tests (with the CLI) (1:59)
-
425 Adding a Component and some fitting Tests (6:14)
-
426 Testing Dependencies_ Components and Services (6:55)
-
427 Simulating Async Tasks (9:41)
-
428 Using _fakeAsync_ and _tick_ (2:14)
-
429 Isolated vs Non-Isolated Tests (6:10)
-
430 Further Resources & Where to Go Next
29 Angular as a Platform & Closer Look at the CLI
-
431 Module Introduction (1:43)
-
432 A Closer Look at _ng new_ (5:18)
-
433 IDE & Project Setup (2:31)
-
434 Understanding the Config Files (9:01)
-
435 Important CLI Commands (5:25)
-
436 The _angular.json_ File - A Closer Look (11:18)
-
437 Angular Schematics - An Introduction (1:41)
-
438 The _ng add_ Command (4:31)
-
439 Using Custom _ng generate_ Schematics (3:05)
-
440 Smooth Updating of Projects with _ng update_ (2:13)
-
441 Simplified Deployment with _ng deploy_ (5:46)
-
442 Understanding _Differential Loading_ (5:10)
-
443 Managing Multiple Projects in One Folder (4:35)
-
444 Angular Libraries - An Introduction (2:51)
-
445 Wrap Up (1:27)
30 Angular Changes & New Features
31 Course Roundup
32 Bonus_ TypeScript Introduction (for Angular 2 Usage)
-
449 Module Introduction (1:15)
-
450 What & Why_ (6:32)
-
451 Installing & Using TypeScript (6:22)
-
452 Base Types & Primitives (3:55)
-
453 Array & Object Types (5:33)
-
454 Type Inference (2:47)
-
455 Working with Union Types (2:48)
-
456 Assigning Type Aliases (2:42)
-
457 Diving into Functions & Function Types (5:12)
-
458 Understanding Generics (7:20)
-
459 Classes & TypeScript (7:58)
-
460 Working with Interfaces (5:36)
-
461 Configuring the TypeScript Compiler (2:29)
-
462 Module Resources
