Angular – The Complete Guide

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