Angular - The Complete Guide (2023 Edition)

Name: Angular - The Complete Guide (2023 Edition)
Price: 12.75 USD
Availability: InStock

34h 58m 7s

English

Paid

February 29, 2024

Learn Angular from the ground up. This course starts at the basics, so you can follow along even if you have never used Angular before. You work with real examples and build a full project as you learn.

What You Will Learn

You explore the core parts of Angular by building small features step by step. You then connect these parts to create a working app.

How Angular apps are built
How to write Angular code with TypeScript
How to build and use components
How to work with directives
How data binding works
How to handle routing and navigation
How to use pipes
How to call APIs with HTTP
How dependency injection works
How Angular modules help structure an app
How to optimize larger apps
Basics of NgRx and state management
You also build a full project to practice each idea

Why Learn Angular

Angular is a front-end framework used by many teams to build fast, stable web apps. It gives you tools to handle complex screens, shared data, and smooth user flows.

You do not need to know AngularJS. Angular is a new framework with a different design. This course covers the modern version from the start.

TypeScript in This Course

This course uses TypeScript. It is the main language for Angular development. You learn the parts of TypeScript you need as you move through the lessons. Basic JavaScript knowledge is enough to start.

Course Structure

You start with simple features, then move to routing, HTTP, forms, and more. Each section has hands-on work. You see how the features fit together in a real project.

Who This Course Is For

New developers who want to learn a modern JavaScript framework
Frontend developers who want to add Angular to their skills
Students who want a structured path into Angular

About the Author: Udemy

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 452 lessons

0:00

#1: Course Introduction

All Course Lessons (452)

#	Lesson Title	Duration
1	Course Introduction Demo	00:58
2	What is Angular?	02:01
3	Angular vs Angular 2 vs Latest Angular Version	02:56
4	Project Setup and First App	08:50
5	Editing the First App	10:06
6	The Course Structure	04:01
7	How to get the Most out of the Course	02:26
8	What is TypeScript?	02:10
9	A Basic Project Setup using Bootstrap for Styling	04:28
10	Module Introduction	00:58
11	How an Angular App gets Loaded and Started	07:12
12	Components are Important!	03:10
13	Creating a New Component	06:52
14	Understanding the Role of AppModule and Component Declaration	05:16
15	Using Custom Components	01:13
16	Creating Components with the CLI & Nesting Components	03:52
17	Working with Component Templates	03:09
18	Working with Component Styles	04:03
19	Fully Understanding the Component Selector	03:51
20	[OPTIONAL] Assignment Solution	06:43
21	What is Databinding?	02:50
22	String Interpolation	05:20
23	Property Binding	06:35
24	Property Binding vs String Interpolation	03:08
25	Event Binding	04:10
26	Passing and Using Data with Event Binding	04:38
27	Two-Way-Databinding	02:48
28	Combining all Forms of Databinding	01:47
29	[OPTIONAL] Assignment Solution	05:13
30	Understanding Directives	02:18
31	Using ngIf to Output Data Conditionally	03:54
32	Enhancing ngIf with an Else Condition	02:47
33	Styling Elements Dynamically with ngStyle	05:03
34	Applying CSS Classes Dynamically with ngClass	02:54
35	Outputting Lists with ngFor	03:44
36	[OPTIONAL] Assignment Solution	07:07
37	Getting the Index when using ngFor	02:53
38	Project Introduction	01:05
39	Planning the App	05:35
40	Setting up the Application	04:32
41	Creating the Components	09:34
42	Using the Components	03:16
43	Adding a Navigation Bar	05:10
44	Creating a "Recipe" Model	04:34
45	Adding Content to the Recipes Components	07:42
46	Outputting a List of Recipes with ngFor	04:38
47	Displaying Recipe Details	05:54
48	Working on the ShoppingListComponent	01:51
49	Creating an "Ingredient" Model	02:37
50	Creating and Outputting the Shopping List	02:28
51	Adding a Shopping List Edit Section	03:29
52	Wrap Up & Next Steps	00:55
53	Understanding Angular Error Messages	04:37
54	Debugging Code in the Browser Using Sourcemaps	05:33
55	Module Introduction	00:37
56	Splitting Apps into Components	05:57
57	Property & Event Binding Overview	01:45
58	Binding to Custom Properties	05:44
59	Assigning an Alias to Custom Properties	02:00
60	Binding to Custom Events	09:06
61	Assigning an Alias to Custom Events	00:58
62	Custom Property and Event Binding Summary	02:03
63	Understanding View Encapsulation	05:00
64	More on View Encapsulation	02:44
65	Using Local References in Templates	04:37
66	Getting Access to the Template & DOM with @ViewChild	05:03
67	Projecting Content into Components with ng-content	03:23
68	Understanding the Component Lifecycle	04:55
69	Seeing Lifecycle Hooks in Action	11:56
70	Lifecycle Hooks and Template Access	02:34
71	Getting Access to ng-content with @ContentChild	03:01
72	Wrap Up	00:50
73	[OPTIONAL] Assignment Solution	12:22
74	Introduction	00:51
75	Adding Navigation with Event Binding and ngIf	07:32
76	Passing Recipe Data with Property Binding	04:44
77	Passing Data with Event and Property Binding (Combined)	10:33
78	Allowing the User to Add Ingredients to the Shopping List	07:23
79	Module Introduction	01:24
80	ngFor and ngIf Recap	03:37
81	ngClass and ngStyle Recap	02:58
82	Creating a Basic Attribute Directive	06:43
83	Using the Renderer to build a Better Attribute Directive	07:05
84	Using HostListener to Listen to Host Events	03:01
85	Using HostBinding to Bind to Host Properties	03:18
86	Binding to Directive Properties	06:44
87	What Happens behind the Scenes on Structural Directives	03:05
88	Building a Structural Directive	06:15
89	Understanding ngSwitch	02:50
90	Building and Using a Dropdown Directive	06:26
91	Module Introduction	01:41
92	Why would you Need Services?	02:05
93	Creating a Logging Service	03:33
94	Injecting the Logging Service into Components	06:22
95	Creating a Data Service	06:42
96	Understanding the Hierarchical Injector	02:42
97	How many Instances of Service Should It Be?	02:13
98	Injecting Services into Services	05:14
99	Using Services for Cross-Component Communication	04:08
100	[OPTIONAL] Assignment Solution	09:38
101	Introduction	01:24
102	Setting up the Services	01:16
103	Managing Recipes in a Recipe Service	04:08
104	Using a Service for Cross-Component Communication	05:08
105	Adding the Shopping List Service	05:05
106	Using Services for Pushing Data from A to B	03:09
107	Adding Ingredients to Recipes	03:43
108	Passing Ingredients from Recipes to the Shopping List (via a Service)	07:04
109	Module Introduction	01:27
110	Why do we need a Router?	01:17
111	Setting up and Loading Routes	08:03
112	Navigating with Router Links	05:19
113	Understanding Navigation Paths	04:55
114	Styling Active Router Links	05:02
115	Navigating Programmatically	03:29
116	Using Relative Paths in Programmatic Navigation	05:10
117	Passing Parameters to Routes	03:11
118	Fetching Route Parameters	04:02
119	Fetching Route Parameters Reactively	07:26
120	An Important Note about Route Observables	02:43
121	Passing Query Parameters and Fragments	05:54
122	Retrieving Query Parameters and Fragments	03:17
123	Practicing and some Common Gotchas	06:08
124	Setting up Child (Nested) Routes	04:29
125	Using Query Parameters - Practice	05:37
126	Configuring the Handling of Query Parameters	01:51
127	Redirecting and Wildcard Routes	04:37
128	Outsourcing the Route Configuration	04:41
129	An Introduction to Guards	01:46
130	Protecting Routes with canActivate	08:56
131	Protecting Child (Nested) Routes with canActivateChild	02:53
132	Using a Fake Auth Service	01:44
133	Controlling Navigation with canDeactivate	12:29
134	Passing Static Data to a Route	05:57
135	Resolving Dynamic Data with the resolve Guard	09:54
136	Understanding Location Strategies	04:44
137	Wrap Up	00:52
138	Planning the General Structure	01:37
139	Setting Up Routes	07:59
140	Adding Navigation to the App	01:42
141	Marking Active Routes	01:32
142	Fixing Page Reload Issues	02:52
143	Child Routes: Challenge	01:55
144	Adding Child Routing Together	04:22
145	Configuring Route Parameters	06:23
146	Passing Dynamic Parameters to Links	03:02
147	Styling Active Recipe Items	01:16
148	Adding Editing Routes	03:45
149	Retrieving Route Parameters	03:20
150	Programmatic Navigation to the Edit Page	04:47
151	One Note about Route Observables	00:53
152	Module Introduction	04:26
153	Analyzing Angular Observables	02:16
154	Getting Closer to the Core of Observables	06:51
155	Building a Custom Observable	04:47
156	Errors & Completion	06:40
157	Observables & You!	01:56
158	Understanding Operators	08:41
159	Subjects	08:18
160	Wrap Up	01:16
161	Improving the Reactive Service with Observables (Subjects)	06:05
162	Module Introduction	01:20
163	Why do we Need Angular's Help?	02:22
164	Template-Driven (TD) vs Reactive Approach	01:17
165	An Example Form	01:33
166	TD: Creating the Form and Registering the Controls	05:43
167	TD: Submitting and Using the Form	06:16
168	TD: Understanding Form State	02:30
169	TD: Accessing the Form with @ViewChild	03:04
170	TD: Adding Validation to check User Input	04:15
171	TD: Using the Form State	04:28
172	TD: Outputting Validation Error Messages	02:24
173	TD: Set Default Values with ngModel Property Binding	02:17
174	TD: Using ngModel with Two-Way-Binding	02:49
175	TD: Grouping Form Controls	03:31
176	TD: Handling Radio Buttons	03:28
177	TD: Setting and Patching Form Values	04:43
178	TD: Using Form Data	04:45
179	TD: Resetting Forms	01:49
180	Introduction to the Reactive Approach	00:41
181	Reactive: Setup	02:27
182	Reactive: Creating a Form in Code	04:08
183	Reactive: Syncing HTML and Form	03:59
184	Reactive: Submitting the Form	02:16
185	Reactive: Adding Validation	02:52
186	Reactive: Getting Access to Controls	03:48
187	Reactive: Grouping Controls	03:47
188	Reactive: Arrays of Form Controls (FormArray)	07:32
189	Reactive: Creating Custom Validators	06:12
190	Reactive: Using Error Codes	03:21
191	Reactive: Creating a Custom Async Validator	04:39
192	Reactive: Reacting to Status or Value Changes	02:12
193	Reactive: Setting and Patching Values	02:10
194	[OPTIONAL] Assignment Solution	13:49
195	Introduction	01:00
196	TD: Adding the Shopping List Form	03:44
197	Adding Validation to the Form	02:23
198	Allowing the Selection of Items in the List	04:25
199	Loading the Shopping List Items into the Form	03:03
200	Updating existing Items	03:16
201	Resetting the Form	02:35
202	Allowing the the User to Clear (Cancel) the Form	01:17
203	Allowing the Deletion of Shopping List Items	02:53
204	Creating the Template for the (Reactive) Recipe Edit Form	05:01
205	Creating the Form For Editing Recipes	05:07
206	Syncing HTML with the Form	03:53
207	Adding Ingredient Controls to a Form Array	05:40
208	Adding new Ingredient Controls	03:40
209	Validating User Input	05:11
210	Submitting the Recipe Edit Form	07:31
211	Adding a Delete and Clear (Cancel) Functionality	04:48
212	Redirecting the User (after Deleting a Recipe)	01:48
213	Adding an Image Preview	01:49
214	Providing the Recipe Service Correctly	02:00
215	Deleting Ingredients and Some Finishing Touches	03:35
216	Introduction & Why Pipes are Useful	02:03
217	Using Pipes	03:29
218	Parametrizing Pipes	02:11
219	Where to learn more about Pipes	01:57
220	Chaining Multiple Pipes	02:21
221	Creating a Custom Pipe	06:43
222	Parametrizing a Custom Pipe	02:37
223	Example: Creating a Filter Pipe	07:02
224	Pure and Impure Pipes (or: How to "fix" the Filter Pipe)	04:47
225	Understanding the "async" Pipe	04:05
226	A New IDE	00:44
227	Module Introduction	01:07
228	How Does Angular Interact With Backends?	03:10
229	The Anatomy of a Http Request	02:28
230	Backend (Firebase) Setup	02:36
231	Sending a POST Request	10:12
232	GETting Data	02:57
233	Using RxJS Operators to Transform Response Data	04:00
234	Using Types with the HttpClient	05:08
235	Outputting Posts	02:16
236	Showing a Loading Indicator	02:04
237	Using a Service for Http Requests	06:38
238	Services & Components Working Together	03:29
239	Sending a DELETE Request	03:28
240	Handling Errors	06:39
241	Using Subjects for Error Handling	02:40
242	Using the catchError Operator	02:14
243	Error Handling & UX	02:08
244	Setting Headers	03:19
245	Adding Query Params	04:02
246	Observing Different Types of Responses	07:33
247	Changing the Response Body Type	03:17
248	Introducing Interceptors	07:25
249	Manipulating Request Objects	02:33
250	Response Interceptors	02:47
251	Multiple Interceptors	04:53
252	Wrap Up	01:58
253	Module Introduction	00:56
254	Backend (Firebase) Setup	02:04
255	Setting Up the DataStorage Service	05:33
256	Storing Recipes	06:40
257	Fetching Recipes	05:39
258	Transforming Response Data	04:18
259	Resolving Data Before Loading	07:32
260	Fixing a Bug with the Resolver	01:44
261	Module Introduction	00:53
262	How Authentication Works	05:02
263	Adding the Auth Page	06:45
264	Switching Between Auth Modes	04:03
265	Handling Form Input	03:45
266	Preparing the Backend	03:16
267	Preparing the Signup Request	08:25
268	Sending the Signup Request	04:37
269	Adding a Loading Spinner & Error Handling Logic	06:35
270	Improving Error Handling	05:40
271	Sending Login Requests	06:01
272	Login Error Handling	04:30
273	Creating & Storing the User Data	10:18
274	Reflecting the Auth State in the UI	09:42
275	Adding the Token to Outgoing Requests	10:16
276	Attaching the Token with an Interceptor	08:49
277	Adding Logout	03:19
278	Adding Auto-Login	09:56
279	Adding Auto-Logout	07:40
280	Adding an Auth Guard	10:57
281	Wrap Up	01:56
282	Module Introduction	01:10
283	Adding an Alert Modal Component	07:34
284	Understanding the Different Approaches	02:29
285	Using ngIf	03:06
286	Preparing Programmatic Creation	08:28
287	Creating a Component Programmatically	04:47
288	Understanding entryComponents	05:07
289	Data Binding & Event Binding	05:06
290	Wrap Up	01:26
291	Module Introduction	00:42
292	What are Modules?	02:27
293	Analyzing the AppModule	06:25
294	Getting Started with Feature Modules	09:00
295	Splitting Modules Correctly	04:10
296	Adding Routes to Feature Modules	04:36
297	Component Declarations	01:59
298	The ShoppingList Feature Module	04:28
299	Understanding Shared Modules	08:11
300	Understanding the Core Module	05:49
301	Adding an Auth Feature Module	04:23
302	Understanding Lazy Loading	02:53
303	Implementing Lazy Loading	12:21
304	More Lazy Loading	03:03
305	Preloading Lazy-Loaded Code	03:40
306	Modules & Services	05:47
307	Loading Services Differently	08:25
308	Module Introduction	00:53
309	Deployment Preparation & Steps	03:19
310	Using Environment Variables	04:45
311	Deployment Example: Firebase Hosting	09:02
312	Module Introduction	01:28
313	Starting Setup & Why We Want Standalone Components	04:49
314	Building a First Standalone Component	09:50
315	Standalone Directives & Connecting Building Blocks	02:20
316	Migrating Another Component	01:50
317	A Standalone Root Component	04:21
318	Services & Standalone Components	04:00
319	Routing with Standalone Components	06:37
320	Lazy Loading	08:05
321	Summary	01:57
322	Module Introduction	01:09
323	Signals: What & Why?	05:41
324	Creating a New Signal	03:24
325	Updating a Signal Value	02:35
326	Reading & Outputting a Signal Value	02:12
327	Signal Updating: set(), update() & mutate()	06:13
328	Important: Signals are NOT Finished Yet!	01:03
329	Computed Values & Effects	03:49
330	Module Summary	00:56
331	Module Introduction	00:58
332	What Is NgRx?	02:10
333	Understanding NgRx & Its Building Blocks	03:59
334	Project Setup & Installing NgRx	05:13
335	Adding a First Reducer & Store Setup	08:36
336	An Alternative Way Of Creating Reducers	04:20
337	Reading Data From The Store	09:37
338	Introducing Actions & State Changing Reducers	07:50
339	Dispatching Actions	03:42
340	Attaching Data To Actions	04:21
341	Handling Actions Without createReducer	06:02
342	An Alternative Way Of Defining Actions	10:03
343	Time To Practice: A Second Action	05:29
344	Exploring Selectors	08:18
345	Introducing Effects	02:40
346	Installing the Effects Package	02:04
347	Defining a First Effect	08:41
348	The Old @Effect Decorator & Registering Effects	03:44
349	Using Store Data In Effects	03:25
350	Adding a Second Effect	09:59
351	Summary	03:03
352	Getting Started with Reducers	06:45
353	Adding Logic to the Reducer	05:48
354	Understanding & Adding Actions	06:17
355	Setting Up the NgRx Store	04:49
356	Selecting State	08:52
357	Dispatching Actions	07:10
358	Multiple Actions	09:38
359	Preparing Update & Delete Actions	03:10
360	Updating & Deleting Ingredients	11:01
361	Expanding the State	09:18
362	Managing More State via NgRx	09:53
363	Removing Redundant Component State Management	03:33
364	First Summary & Clean Up	05:26
365	One Root State	11:40
366	Setting Up Auth Reducer & Actions	08:26
367	Dispatching Auth Actions	05:54
368	Auth Finished (For Now...)	06:44
369	And Important Note on Actions	06:25
370	Exploring NgRx Effects	03:39
371	Defining the First Effect	05:20
372	Effects & Error Handling	08:58
373	Login via NgRx Effects	09:09
374	Managing UI State in NgRx	07:31
375	Finishing the Login Effect	07:12
376	Preparing Other Auth Actions	04:10
377	Adding Signup	06:18
378	Further Auth Effects	06:14
379	Adding Auto-Login with NgRx	08:17
380	Adding Auto-Logout	06:32
381	Finishing the Auth Effects	02:30
382	Using the Store Devtools	06:21
383	The Router Store	02:12
384	Getting Started with NgRx for Recipes	11:04
385	Fetching Recipe Detail Data	09:15
386	Fetching Recipes & Using the Resolver	12:01
387	Fixing the Auth Redirect	02:11
388	Update, Delete and Add Recipes	15:12
389	Storing Recipes via Effects	05:53
390	Cleanup Work	01:59
391	Wrap Up	02:13
392	Module Introduction	00:34
393	Angular Universal - What & Why?	07:50
394	Converting the App to a Universal App	03:13
395	Analyzing & Running Server-side Code	05:23
396	A Closer Look At The Server-side Code	04:11
397	Integrating a REST API	03:08
398	Some Notes About Deploying Angular Universal Apps	04:31
399	Introduction	01:04
400	Setting up the Starting Project	00:53
401	Animations Triggers and State	07:13
402	Switching between States	02:05
403	Transitions	01:55
404	Advanced Transitions	05:23
405	Transition Phases	03:58
406	The "void" State	06:12
407	Using Keyframes for Animations	05:33
408	Grouping Transitions	02:12
409	Using Animation Callbacks	02:39
410	Module Introduction	02:10
411	Adding Service Workers	12:42
412	Caching Assets for Offline Use	05:29
413	Caching Dynamic Assets & URLs	07:03
414	Introduction	01:19
415	Why Unit Tests?	02:13
416	Analyzing the Testing Setup (as created by the CLI)	08:02
417	Running Tests (with the CLI)	02:00
418	Adding a Component and some fitting Tests	06:15
419	Testing Dependencies: Components and Services	06:56
420	Simulating Async Tasks	09:42
421	Using "fakeAsync" and "tick"	02:15
422	Isolated vs Non-Isolated Tests	06:11
423	Module Introduction	01:45
424	A Closer Look at "ng new"	05:19
425	IDE & Project Setup	02:32
426	Understanding the Config Files	09:02
427	Important CLI Commands	05:26
428	The "angular.json" File - A Closer Look	11:19
429	Angular Schematics - An Introduction	01:42
430	The "ng add" Command	04:32
431	Using Custom "ng generate" Schematics	03:06
432	Smooth Updating of Projects with "ng update"	02:15
433	Simplified Deployment with "ng deploy"	05:47
434	Understanding "Differential Loading"	05:11
435	Managing Multiple Projects in One Folder	04:36
436	Angular Libraries - An Introduction	02:52
437	Wrap Up	01:28
438	A First Look At Angular Elements	15:35
439	Thanks for being part of the course!	00:56
440	Module Introduction	01:16
441	What & Why?	06:33
442	Installing & Using TypeScript	06:23
443	Base Types & Primitives	03:56
444	Array & Object Types	05:34
445	Type Inference	02:48
446	Working with Union Types	02:49
447	Assigning Type Aliases	02:43
448	Diving into Functions & Function Types	05:13
449	Understanding Generics	07:21
450	Classes & TypeScript	07:59
451	Working with Interfaces	05:37
452	Configuring the TypeScript Compiler	02:30

Unlock unlimited learning

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

Learn more about subscription

Course content

452 lessons · 34h 58m 7s

Show all 452 lessons

1 Course Introduction 00:58
2 What is Angular? 02:01
3 Angular vs Angular 2 vs Latest Angular Version 02:56
4 Project Setup and First App 08:50
5 Editing the First App 10:06
6 The Course Structure 04:01
7 How to get the Most out of the Course 02:26
8 What is TypeScript? 02:10
9 A Basic Project Setup using Bootstrap for Styling 04:28
10 Module Introduction 00:58
11 How an Angular App gets Loaded and Started 07:12
12 Components are Important! 03:10
13 Creating a New Component 06:52
14 Understanding the Role of AppModule and Component Declaration 05:16
15 Using Custom Components 01:13
16 Creating Components with the CLI & Nesting Components 03:52
17 Working with Component Templates 03:09
18 Working with Component Styles 04:03
19 Fully Understanding the Component Selector 03:51
20 [OPTIONAL] Assignment Solution 06:43
21 What is Databinding? 02:50
22 String Interpolation 05:20
23 Property Binding 06:35
24 Property Binding vs String Interpolation 03:08
25 Event Binding 04:10
26 Passing and Using Data with Event Binding 04:38
27 Two-Way-Databinding 02:48
28 Combining all Forms of Databinding 01:47
29 [OPTIONAL] Assignment Solution 05:13
30 Understanding Directives 02:18
31 Using ngIf to Output Data Conditionally 03:54
32 Enhancing ngIf with an Else Condition 02:47
33 Styling Elements Dynamically with ngStyle 05:03
34 Applying CSS Classes Dynamically with ngClass 02:54
35 Outputting Lists with ngFor 03:44
36 [OPTIONAL] Assignment Solution 07:07
37 Getting the Index when using ngFor 02:53
38 Project Introduction 01:05
39 Planning the App 05:35
40 Setting up the Application 04:32
41 Creating the Components 09:34
42 Using the Components 03:16
43 Adding a Navigation Bar 05:10
44 Creating a "Recipe" Model 04:34
45 Adding Content to the Recipes Components 07:42
46 Outputting a List of Recipes with ngFor 04:38
47 Displaying Recipe Details 05:54
48 Working on the ShoppingListComponent 01:51
49 Creating an "Ingredient" Model 02:37
50 Creating and Outputting the Shopping List 02:28
51 Adding a Shopping List Edit Section 03:29
52 Wrap Up & Next Steps 00:55
53 Understanding Angular Error Messages 04:37
54 Debugging Code in the Browser Using Sourcemaps 05:33
55 Module Introduction 00:37
56 Splitting Apps into Components 05:57
57 Property & Event Binding Overview 01:45
58 Binding to Custom Properties 05:44
59 Assigning an Alias to Custom Properties 02:00
60 Binding to Custom Events 09:06
61 Assigning an Alias to Custom Events 00:58
62 Custom Property and Event Binding Summary 02:03
63 Understanding View Encapsulation 05:00
64 More on View Encapsulation 02:44
65 Using Local References in Templates 04:37
66 Getting Access to the Template & DOM with @ViewChild 05:03
67 Projecting Content into Components with ng-content 03:23
68 Understanding the Component Lifecycle 04:55
69 Seeing Lifecycle Hooks in Action 11:56
70 Lifecycle Hooks and Template Access 02:34
71 Getting Access to ng-content with @ContentChild 03:01
72 Wrap Up 00:50
73 [OPTIONAL] Assignment Solution 12:22
74 Introduction 00:51
75 Adding Navigation with Event Binding and ngIf 07:32
76 Passing Recipe Data with Property Binding 04:44
77 Passing Data with Event and Property Binding (Combined) 10:33
78 Allowing the User to Add Ingredients to the Shopping List 07:23
79 Module Introduction 01:24
80 ngFor and ngIf Recap 03:37
81 ngClass and ngStyle Recap 02:58
82 Creating a Basic Attribute Directive 06:43
83 Using the Renderer to build a Better Attribute Directive 07:05
84 Using HostListener to Listen to Host Events 03:01
85 Using HostBinding to Bind to Host Properties 03:18
86 Binding to Directive Properties 06:44
87 What Happens behind the Scenes on Structural Directives 03:05
88 Building a Structural Directive 06:15
89 Understanding ngSwitch 02:50
90 Building and Using a Dropdown Directive 06:26
91 Module Introduction 01:41
92 Why would you Need Services? 02:05
93 Creating a Logging Service 03:33
94 Injecting the Logging Service into Components 06:22
95 Creating a Data Service 06:42
96 Understanding the Hierarchical Injector 02:42
97 How many Instances of Service Should It Be? 02:13
98 Injecting Services into Services 05:14
99 Using Services for Cross-Component Communication 04:08
100 [OPTIONAL] Assignment Solution 09:38
101 Introduction 01:24
102 Setting up the Services 01:16
103 Managing Recipes in a Recipe Service 04:08
104 Using a Service for Cross-Component Communication 05:08
105 Adding the Shopping List Service 05:05
106 Using Services for Pushing Data from A to B 03:09
107 Adding Ingredients to Recipes 03:43
108 Passing Ingredients from Recipes to the Shopping List (via a Service) 07:04
109 Module Introduction 01:27
110 Why do we need a Router? 01:17
111 Setting up and Loading Routes 08:03
112 Navigating with Router Links 05:19
113 Understanding Navigation Paths 04:55
114 Styling Active Router Links 05:02
115 Navigating Programmatically 03:29
116 Using Relative Paths in Programmatic Navigation 05:10
117 Passing Parameters to Routes 03:11
118 Fetching Route Parameters 04:02
119 Fetching Route Parameters Reactively 07:26
120 An Important Note about Route Observables 02:43
121 Passing Query Parameters and Fragments 05:54
122 Retrieving Query Parameters and Fragments 03:17
123 Practicing and some Common Gotchas 06:08
124 Setting up Child (Nested) Routes 04:29
125 Using Query Parameters - Practice 05:37
126 Configuring the Handling of Query Parameters 01:51
127 Redirecting and Wildcard Routes 04:37
128 Outsourcing the Route Configuration 04:41
129 An Introduction to Guards 01:46
130 Protecting Routes with canActivate 08:56
131 Protecting Child (Nested) Routes with canActivateChild 02:53
132 Using a Fake Auth Service 01:44
133 Controlling Navigation with canDeactivate 12:29
134 Passing Static Data to a Route 05:57
135 Resolving Dynamic Data with the resolve Guard 09:54
136 Understanding Location Strategies 04:44
137 Wrap Up 00:52
138 Planning the General Structure 01:37
139 Setting Up Routes 07:59
140 Adding Navigation to the App 01:42
141 Marking Active Routes 01:32
142 Fixing Page Reload Issues 02:52
143 Child Routes: Challenge 01:55
144 Adding Child Routing Together 04:22
145 Configuring Route Parameters 06:23
146 Passing Dynamic Parameters to Links 03:02
147 Styling Active Recipe Items 01:16
148 Adding Editing Routes 03:45
149 Retrieving Route Parameters 03:20
150 Programmatic Navigation to the Edit Page 04:47
151 One Note about Route Observables 00:53
152 Module Introduction 04:26
153 Analyzing Angular Observables 02:16
154 Getting Closer to the Core of Observables 06:51
155 Building a Custom Observable 04:47
156 Errors & Completion 06:40
157 Observables & You! 01:56
158 Understanding Operators 08:41
159 Subjects 08:18
160 Wrap Up 01:16
161 Improving the Reactive Service with Observables (Subjects) 06:05
162 Module Introduction 01:20
163 Why do we Need Angular's Help? 02:22
164 Template-Driven (TD) vs Reactive Approach 01:17
165 An Example Form 01:33
166 TD: Creating the Form and Registering the Controls 05:43
167 TD: Submitting and Using the Form 06:16
168 TD: Understanding Form State 02:30
169 TD: Accessing the Form with @ViewChild 03:04
170 TD: Adding Validation to check User Input 04:15
171 TD: Using the Form State 04:28
172 TD: Outputting Validation Error Messages 02:24
173 TD: Set Default Values with ngModel Property Binding 02:17
174 TD: Using ngModel with Two-Way-Binding 02:49
175 TD: Grouping Form Controls 03:31
176 TD: Handling Radio Buttons 03:28
177 TD: Setting and Patching Form Values 04:43
178 TD: Using Form Data 04:45
179 TD: Resetting Forms 01:49
180 Introduction to the Reactive Approach 00:41
181 Reactive: Setup 02:27
182 Reactive: Creating a Form in Code 04:08
183 Reactive: Syncing HTML and Form 03:59
184 Reactive: Submitting the Form 02:16
185 Reactive: Adding Validation 02:52
186 Reactive: Getting Access to Controls 03:48
187 Reactive: Grouping Controls 03:47
188 Reactive: Arrays of Form Controls (FormArray) 07:32
189 Reactive: Creating Custom Validators 06:12
190 Reactive: Using Error Codes 03:21
191 Reactive: Creating a Custom Async Validator 04:39
192 Reactive: Reacting to Status or Value Changes 02:12
193 Reactive: Setting and Patching Values 02:10
194 [OPTIONAL] Assignment Solution 13:49
195 Introduction 01:00
196 TD: Adding the Shopping List Form 03:44
197 Adding Validation to the Form 02:23
198 Allowing the Selection of Items in the List 04:25
199 Loading the Shopping List Items into the Form 03:03
200 Updating existing Items 03:16
201 Resetting the Form 02:35
202 Allowing the the User to Clear (Cancel) the Form 01:17
203 Allowing the Deletion of Shopping List Items 02:53
204 Creating the Template for the (Reactive) Recipe Edit Form 05:01
205 Creating the Form For Editing Recipes 05:07
206 Syncing HTML with the Form 03:53
207 Adding Ingredient Controls to a Form Array 05:40
208 Adding new Ingredient Controls 03:40
209 Validating User Input 05:11
210 Submitting the Recipe Edit Form 07:31
211 Adding a Delete and Clear (Cancel) Functionality 04:48
212 Redirecting the User (after Deleting a Recipe) 01:48
213 Adding an Image Preview 01:49
214 Providing the Recipe Service Correctly 02:00
215 Deleting Ingredients and Some Finishing Touches 03:35
216 Introduction & Why Pipes are Useful 02:03
217 Using Pipes 03:29
218 Parametrizing Pipes 02:11
219 Where to learn more about Pipes 01:57
220 Chaining Multiple Pipes 02:21
221 Creating a Custom Pipe 06:43
222 Parametrizing a Custom Pipe 02:37
223 Example: Creating a Filter Pipe 07:02
224 Pure and Impure Pipes (or: How to "fix" the Filter Pipe) 04:47
225 Understanding the "async" Pipe 04:05
226 A New IDE 00:44
227 Module Introduction 01:07
228 How Does Angular Interact With Backends? 03:10
229 The Anatomy of a Http Request 02:28
230 Backend (Firebase) Setup 02:36
231 Sending a POST Request 10:12
232 GETting Data 02:57
233 Using RxJS Operators to Transform Response Data 04:00
234 Using Types with the HttpClient 05:08
235 Outputting Posts 02:16
236 Showing a Loading Indicator 02:04
237 Using a Service for Http Requests 06:38
238 Services & Components Working Together 03:29
239 Sending a DELETE Request 03:28
240 Handling Errors 06:39
241 Using Subjects for Error Handling 02:40
242 Using the catchError Operator 02:14
243 Error Handling & UX 02:08
244 Setting Headers 03:19
245 Adding Query Params 04:02
246 Observing Different Types of Responses 07:33
247 Changing the Response Body Type 03:17
248 Introducing Interceptors 07:25
249 Manipulating Request Objects 02:33
250 Response Interceptors 02:47
251 Multiple Interceptors 04:53
252 Wrap Up 01:58
253 Module Introduction 00:56
254 Backend (Firebase) Setup 02:04
255 Setting Up the DataStorage Service 05:33
256 Storing Recipes 06:40
257 Fetching Recipes 05:39
258 Transforming Response Data 04:18
259 Resolving Data Before Loading 07:32
260 Fixing a Bug with the Resolver 01:44
261 Module Introduction 00:53
262 How Authentication Works 05:02
263 Adding the Auth Page 06:45
264 Switching Between Auth Modes 04:03
265 Handling Form Input 03:45
266 Preparing the Backend 03:16
267 Preparing the Signup Request 08:25
268 Sending the Signup Request 04:37
269 Adding a Loading Spinner & Error Handling Logic 06:35
270 Improving Error Handling 05:40
271 Sending Login Requests 06:01
272 Login Error Handling 04:30
273 Creating & Storing the User Data 10:18
274 Reflecting the Auth State in the UI 09:42
275 Adding the Token to Outgoing Requests 10:16
276 Attaching the Token with an Interceptor 08:49
277 Adding Logout 03:19
278 Adding Auto-Login 09:56
279 Adding Auto-Logout 07:40
280 Adding an Auth Guard 10:57
281 Wrap Up 01:56
282 Module Introduction 01:10
283 Adding an Alert Modal Component 07:34
284 Understanding the Different Approaches 02:29
285 Using ngIf 03:06
286 Preparing Programmatic Creation 08:28
287 Creating a Component Programmatically 04:47
288 Understanding entryComponents 05:07
289 Data Binding & Event Binding 05:06
290 Wrap Up 01:26
291 Module Introduction 00:42
292 What are Modules? 02:27
293 Analyzing the AppModule 06:25
294 Getting Started with Feature Modules 09:00
295 Splitting Modules Correctly 04:10
296 Adding Routes to Feature Modules 04:36
297 Component Declarations 01:59
298 The ShoppingList Feature Module 04:28
299 Understanding Shared Modules 08:11
300 Understanding the Core Module 05:49
301 Adding an Auth Feature Module 04:23
302 Understanding Lazy Loading 02:53
303 Implementing Lazy Loading 12:21
304 More Lazy Loading 03:03
305 Preloading Lazy-Loaded Code 03:40
306 Modules & Services 05:47
307 Loading Services Differently 08:25
308 Module Introduction 00:53
309 Deployment Preparation & Steps 03:19
310 Using Environment Variables 04:45
311 Deployment Example: Firebase Hosting 09:02
312 Module Introduction 01:28
313 Starting Setup & Why We Want Standalone Components 04:49
314 Building a First Standalone Component 09:50
315 Standalone Directives & Connecting Building Blocks 02:20
316 Migrating Another Component 01:50
317 A Standalone Root Component 04:21
318 Services & Standalone Components 04:00
319 Routing with Standalone Components 06:37
320 Lazy Loading 08:05
321 Summary 01:57
322 Module Introduction 01:09
323 Signals: What & Why? 05:41
324 Creating a New Signal 03:24
325 Updating a Signal Value 02:35
326 Reading & Outputting a Signal Value 02:12
327 Signal Updating: set(), update() & mutate() 06:13
328 Important: Signals are NOT Finished Yet! 01:03
329 Computed Values & Effects 03:49
330 Module Summary 00:56
331 Module Introduction 00:58
332 What Is NgRx? 02:10
333 Understanding NgRx & Its Building Blocks 03:59
334 Project Setup & Installing NgRx 05:13
335 Adding a First Reducer & Store Setup 08:36
336 An Alternative Way Of Creating Reducers 04:20
337 Reading Data From The Store 09:37
338 Introducing Actions & State Changing Reducers 07:50
339 Dispatching Actions 03:42
340 Attaching Data To Actions 04:21
341 Handling Actions Without createReducer 06:02
342 An Alternative Way Of Defining Actions 10:03
343 Time To Practice: A Second Action 05:29
344 Exploring Selectors 08:18
345 Introducing Effects 02:40
346 Installing the Effects Package 02:04
347 Defining a First Effect 08:41
348 The Old @Effect Decorator & Registering Effects 03:44
349 Using Store Data In Effects 03:25
350 Adding a Second Effect 09:59
351 Summary 03:03
352 Getting Started with Reducers 06:45
353 Adding Logic to the Reducer 05:48
354 Understanding & Adding Actions 06:17
355 Setting Up the NgRx Store 04:49
356 Selecting State 08:52
357 Dispatching Actions 07:10
358 Multiple Actions 09:38
359 Preparing Update & Delete Actions 03:10
360 Updating & Deleting Ingredients 11:01
361 Expanding the State 09:18
362 Managing More State via NgRx 09:53
363 Removing Redundant Component State Management 03:33
364 First Summary & Clean Up 05:26
365 One Root State 11:40
366 Setting Up Auth Reducer & Actions 08:26
367 Dispatching Auth Actions 05:54
368 Auth Finished (For Now...) 06:44
369 And Important Note on Actions 06:25
370 Exploring NgRx Effects 03:39
371 Defining the First Effect 05:20
372 Effects & Error Handling 08:58
373 Login via NgRx Effects 09:09
374 Managing UI State in NgRx 07:31
375 Finishing the Login Effect 07:12
376 Preparing Other Auth Actions 04:10
377 Adding Signup 06:18
378 Further Auth Effects 06:14
379 Adding Auto-Login with NgRx 08:17
380 Adding Auto-Logout 06:32
381 Finishing the Auth Effects 02:30
382 Using the Store Devtools 06:21
383 The Router Store 02:12
384 Getting Started with NgRx for Recipes 11:04
385 Fetching Recipe Detail Data 09:15
386 Fetching Recipes & Using the Resolver 12:01
387 Fixing the Auth Redirect 02:11
388 Update, Delete and Add Recipes 15:12
389 Storing Recipes via Effects 05:53
390 Cleanup Work 01:59
391 Wrap Up 02:13
392 Module Introduction 00:34
393 Angular Universal - What & Why? 07:50
394 Converting the App to a Universal App 03:13
395 Analyzing & Running Server-side Code 05:23
396 A Closer Look At The Server-side Code 04:11
397 Integrating a REST API 03:08
398 Some Notes About Deploying Angular Universal Apps 04:31
399 Introduction 01:04
400 Setting up the Starting Project 00:53
401 Animations Triggers and State 07:13
402 Switching between States 02:05
403 Transitions 01:55
404 Advanced Transitions 05:23
405 Transition Phases 03:58
406 The "void" State 06:12
407 Using Keyframes for Animations 05:33
408 Grouping Transitions 02:12
409 Using Animation Callbacks 02:39
410 Module Introduction 02:10
411 Adding Service Workers 12:42
412 Caching Assets for Offline Use 05:29
413 Caching Dynamic Assets & URLs 07:03
414 Introduction 01:19
415 Why Unit Tests? 02:13
416 Analyzing the Testing Setup (as created by the CLI) 08:02
417 Running Tests (with the CLI) 02:00
418 Adding a Component and some fitting Tests 06:15
419 Testing Dependencies: Components and Services 06:56
420 Simulating Async Tasks 09:42
421 Using "fakeAsync" and "tick" 02:15
422 Isolated vs Non-Isolated Tests 06:11
423 Module Introduction 01:45
424 A Closer Look at "ng new" 05:19
425 IDE & Project Setup 02:32
426 Understanding the Config Files 09:02
427 Important CLI Commands 05:26
428 The "angular.json" File - A Closer Look 11:19
429 Angular Schematics - An Introduction 01:42
430 The "ng add" Command 04:32
431 Using Custom "ng generate" Schematics 03:06
432 Smooth Updating of Projects with "ng update" 02:15
433 Simplified Deployment with "ng deploy" 05:47
434 Understanding "Differential Loading" 05:11
435 Managing Multiple Projects in One Folder 04:36
436 Angular Libraries - An Introduction 02:52
437 Wrap Up 01:28
438 A First Look At Angular Elements 15:35
439 Thanks for being part of the course! 00:56
440 Module Introduction 01:16
441 What & Why? 06:33
442 Installing & Using TypeScript 06:23
443 Base Types & Primitives 03:56
444 Array & Object Types 05:34
445 Type Inference 02:48
446 Working with Union Types 02:49
447 Assigning Type Aliases 02:43
448 Diving into Functions & Function Types 05:13
449 Understanding Generics 07:21
450 Classes & TypeScript 07:59
451 Working with Interfaces 05:37
452 Configuring the TypeScript Compiler 02:30

Related courses

PROFESSIONAL Full Stack Developer
Sources: Nelson Djalo (Amigoscode)
Are you ready to level up your coding skills and become a full stack professional?
54 hours 23 minutes 35 seconds 5 / 5
Complete Angular Developer in 2025 Zero to Mastery
Sources: Zero To Mastery
Learn Angular from a senior industry professional. This is the only Angular course you need to learn Angular, build enterprise-level applications from scratc...
52 hours 28 minutes 39 seconds
Angular - The Complete Guide
Sources: Academind Pro (Maximilian Schwarzmüller)
Angular is one of the most popular web development frameworks you can learn these days - especially in the enterprise landscape. It offers amazing...
26 hours 25 minutes 26 seconds 5 / 5

Frequently asked questions

What is Angular - The Complete Guide (2023 Edition) about?

Learn Angular from the ground up. This course starts at the basics, so you can follow along even if you have never used Angular before. You work with real examples and build a full project as you learn. What You Will Learn You explore the…

Who teaches Angular - The Complete Guide (2023 Edition)?

Angular - The Complete Guide (2023 Edition) is taught by Udemy. You can find more courses by this instructor on the corresponding source page.

How long is Angular - The Complete Guide (2023 Edition)?

Angular - The Complete Guide (2023 Edition) contains 452 lessons with a total runtime of 34 hours 58 minutes. All lessons are available to watch online at your own pace.

Is Angular - The Complete Guide (2023 Edition) free to watch?

Angular - The Complete Guide (2023 Edition) is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.

Where can I watch Angular - The Complete Guide (2023 Edition) online?

Angular - The Complete Guide (2023 Edition) is available to watch online on CourseFlix at https://courseflix.net/course/angular-the-complete-guide-2023-edition. The page hosts every lesson with the integrated video player; no download is required.