CourseFlix

Angular Basics (v15)

8h 58m 31s
English
Paid

Master the essentials of Angular with a comprehensive course on modern best practices and patterns honed from years of evolution in web development. Learn to create a scalable architecture, utilize immutable data structures, and implement effective state services. Explore the power of brand new Standalone Components while building a robust app from start-to-finish, ultimately fast-tracking your Angular skills.

Course Overview

This course provides in-depth knowledge of Angular's latest version, focusing on practical skills and real-world applications. By the end, you'll understand how to structure your projects effectively and manage data flow seamlessly.

Key Learning Objectives

  • Understand the principles of scalable architecture in Angular.
  • Implement and work with immutable data structures.
  • Develop CO₆ ²²² è™äæãő properties and effectively manage state within your Angular applications.
  • Learn to deploy and utilize Standalone Components for streamlined development.

Course Content

Introduction to Angular

Start with the basics of Angular, covering its core features and setup. Familiarize yourself with the CLI to kickstart your projects smoothly.

Building Scalable Architecture

Create a robust foundation for your applications using best practices in architecture design, allowing for future growth and adaptation.

Working with Immutable Data Structures

Learn the advantages of using immutable data structures and how they improve performance and maintainability.

State Services and Management

Master different state management strategies to maintain a stable and predictable state throughout your application.

Exploring Standalone Components

Dive into Angular's Standalone Components to modularize your application effectively and reduce dependencies.

Conclusion

By completing this course, you will be equipped with the latest Angular tools and techniques that empower you to build responsive, efficient, and modern web applications.

Additional

About the Author: Ultimate Courses (Todd Motto)

Ultimate Courses (Todd Motto) thumbnail

Ultimate Courses (ultimatecourses.com) is the online course platform of Todd Motto, a UK-based Google Developer Expert for Angular and one of the longer-running independent voices on the Angular and TypeScript stack. The platform also covers Vue, RxJS, and JavaScript fundamentals.

The course catalog covers Angular in depth (the framework from its early TypeScript-era through current versions), TypeScript (compiler internals and advanced type-system patterns), RxJS and reactive programming, Vue.js, JavaScript fundamentals, and the broader modern front-end ecosystem. Material is taught at the level of comprehensive reference work rather than introductory tutorial.

The CourseFlix listing under this source carries 9 Ultimate Courses titles spanning that range. Material is paid; Ultimate Courses runs on per-course or membership pricing on the original platform.

Watch Online 84 lessons

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: The Missing Introduction to Angular
All Course Lessons (84)
#Lesson TitleDurationAccess
1
The Missing Introduction to Angular Demo
12:53
2
Component Architecture, State and One-Way Data Flow
14:02
3
Project Setup and Walkthrough
06:26
4
Understand Angular Bootstrapping
07:13
5
Interpolation and Expressions
07:00
6
Property Binding Syntax
07:38
7
Event Binding Syntax
11:22
8
Template Ref Variables
05:18
9
Create a Child Feature Module
06:55
10
Create a Smart Container Component
05:13
11
Use the NgOnInit Lifecycle Hook
08:29
12
Type Definitions with Interfaces
06:01
13
Create and Render a Dumb Component
06:19
14
Pass State to Dumb Components via @Input
06:34
15
Scoped Styles in Components
11:00
16
Style a Host Element
04:53
17
View Encapsulation: Shadow DOM and Emulated
05:29
18
Set Inline Styles with Style Bindings
06:30
19
Complex Inline Styles with NgStyle
06:20
20
Set Classes with Class Bindings
04:56
21
Complex Classes with NgClass
05:17
22
Use a Pipe to Format Currency
05:01
23
Use NgIf for Conditional Rendering
05:30
24
Use <ng-container> for Virtual Elements
02:38
25
Use the NgIf, Else and Then Syntax
04:34
26
NgIf Syntax with <ng-template>
05:45
27
NgFor and Iterating Collections
05:19
28
Improve NgFor Performance with TrackBy
04:38
29
Access NgFor Index, Odd and Even Variables
04:37
30
Advanced NgFor Syntax with <ng-template>
04:47
31
Use NgSwitch for Case Rendering
08:37
32
Advanced NgSwitch Syntax with <ng-template>
03:36
33
Create a Form Container and Dumb Component
07:36
34
Use NgForm with a Template Ref Variable
03:44
35
<input> Binding with NgModel
05:03
36
Radio Button Binding with NgModel
07:54
37
<select> and <option> Rendering and Binding
07:16
38
Textarea Binding with NgModel
01:35
39
Add Validation Constraints and Form Status
05:48
40
NgModel Template Refs and Validation States
07:12
41
Show Error Messages on Validation Change
07:39
42
Style Invalid Input Fields Globally
04:31
43
Form Submit with NgSubmit
06:57
44
Disable Submit and Safety Check Submissions
02:32
45
Trigger Validation Messages On Submit
07:46
46
Control NgModel Writes with ngModelOptions
04:08
47
Trigger a Form State and Validation Reset
03:55
48
Show Visual Feedback on Form Submission
03:01
49
Emit Form Payload to Smart Container via @Output
08:08
50
One-Way Data Binding to NgModel
10:37
51
Create an @Injectable Service
03:58
52
Share State in Components via Services
07:40
53
Class Methods as State Selectors
05:41
54
Immutable State Creation
07:17
55
Immutable State Updates
12:02
56
Immutable State Deletions
05:13
57
Configure and Proxy a Local HTTP Server
04:58
58
Read Data with HttpClient GET
09:46
59
Store State with Observable Pipes
10:38
60
Branch off an Observable to Access State
07:38
61
Create Data with HttpClient POST
07:19
62
Update Data with HttpClient PUT
09:14
63
Delete Data with HttpClient DELETE
05:40
64
Error Handling with catchError() and throwError()
11:11
65
Retry Failed Requests with retry()
02:47
66
Use retryWhen() to Delay Retries
04:58
67
Set HttpHeaders and RequestOptions
07:36
68
Root Module Routes with forRoot()
08:40
69
Create Nested Child Routes
02:59
70
Redirect Routes to New Paths
04:03
71
Handle 404 Not Found Routes with Wildcards
02:41
72
Lazy-Loading Feature Modules
07:49
73
Declarative Navigation with routerLink Directives
06:15
74
Dynamic Route Params and ActivatedRoute
06:48
75
Pass Custom Data to Routed Components
08:15
76
Programmatic Navigation with Router.navigate()
05:21
77
The Idea Behind Standalone Angular
07:20
78
Bootstrap a Standalone Component instead of NgModule
05:36
79
Providing a Route Config via importProvidersFrom
05:59
80
Import NgModules into Standalone Components
03:50
81
Lazy-Load Component-Less Route Configs
04:33
82
Providing Standalone Directives, Components and Pipes
10:15
83
Code Split and Lazy-Load at the Component Level
04:34
84
Scoped or Component-Level Providers and “providedIn”
03:45
Unlock unlimited learning

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

Learn more about subscription

Course content

84 lessons · 8h 58m 31s
Show all 84 lessons
  1. 1 The Missing Introduction to Angular 12:53
  2. 2 Component Architecture, State and One-Way Data Flow 14:02
  3. 3 Project Setup and Walkthrough 06:26
  4. 4 Understand Angular Bootstrapping 07:13
  5. 5 Interpolation and Expressions 07:00
  6. 6 Property Binding Syntax 07:38
  7. 7 Event Binding Syntax 11:22
  8. 8 Template Ref Variables 05:18
  9. 9 Create a Child Feature Module 06:55
  10. 10 Create a Smart Container Component 05:13
  11. 11 Use the NgOnInit Lifecycle Hook 08:29
  12. 12 Type Definitions with Interfaces 06:01
  13. 13 Create and Render a Dumb Component 06:19
  14. 14 Pass State to Dumb Components via @Input 06:34
  15. 15 Scoped Styles in Components 11:00
  16. 16 Style a Host Element 04:53
  17. 17 View Encapsulation: Shadow DOM and Emulated 05:29
  18. 18 Set Inline Styles with Style Bindings 06:30
  19. 19 Complex Inline Styles with NgStyle 06:20
  20. 20 Set Classes with Class Bindings 04:56
  21. 21 Complex Classes with NgClass 05:17
  22. 22 Use a Pipe to Format Currency 05:01
  23. 23 Use NgIf for Conditional Rendering 05:30
  24. 24 Use <ng-container> for Virtual Elements 02:38
  25. 25 Use the NgIf, Else and Then Syntax 04:34
  26. 26 NgIf Syntax with <ng-template> 05:45
  27. 27 NgFor and Iterating Collections 05:19
  28. 28 Improve NgFor Performance with TrackBy 04:38
  29. 29 Access NgFor Index, Odd and Even Variables 04:37
  30. 30 Advanced NgFor Syntax with <ng-template> 04:47
  31. 31 Use NgSwitch for Case Rendering 08:37
  32. 32 Advanced NgSwitch Syntax with <ng-template> 03:36
  33. 33 Create a Form Container and Dumb Component 07:36
  34. 34 Use NgForm with a Template Ref Variable 03:44
  35. 35 <input> Binding with NgModel 05:03
  36. 36 Radio Button Binding with NgModel 07:54
  37. 37 <select> and <option> Rendering and Binding 07:16
  38. 38 Textarea Binding with NgModel 01:35
  39. 39 Add Validation Constraints and Form Status 05:48
  40. 40 NgModel Template Refs and Validation States 07:12
  41. 41 Show Error Messages on Validation Change 07:39
  42. 42 Style Invalid Input Fields Globally 04:31
  43. 43 Form Submit with NgSubmit 06:57
  44. 44 Disable Submit and Safety Check Submissions 02:32
  45. 45 Trigger Validation Messages On Submit 07:46
  46. 46 Control NgModel Writes with ngModelOptions 04:08
  47. 47 Trigger a Form State and Validation Reset 03:55
  48. 48 Show Visual Feedback on Form Submission 03:01
  49. 49 Emit Form Payload to Smart Container via @Output 08:08
  50. 50 One-Way Data Binding to NgModel 10:37
  51. 51 Create an @Injectable Service 03:58
  52. 52 Share State in Components via Services 07:40
  53. 53 Class Methods as State Selectors 05:41
  54. 54 Immutable State Creation 07:17
  55. 55 Immutable State Updates 12:02
  56. 56 Immutable State Deletions 05:13
  57. 57 Configure and Proxy a Local HTTP Server 04:58
  58. 58 Read Data with HttpClient GET 09:46
  59. 59 Store State with Observable Pipes 10:38
  60. 60 Branch off an Observable to Access State 07:38
  61. 61 Create Data with HttpClient POST 07:19
  62. 62 Update Data with HttpClient PUT 09:14
  63. 63 Delete Data with HttpClient DELETE 05:40
  64. 64 Error Handling with catchError() and throwError() 11:11
  65. 65 Retry Failed Requests with retry() 02:47
  66. 66 Use retryWhen() to Delay Retries 04:58
  67. 67 Set HttpHeaders and RequestOptions 07:36
  68. 68 Root Module Routes with forRoot() 08:40
  69. 69 Create Nested Child Routes 02:59
  70. 70 Redirect Routes to New Paths 04:03
  71. 71 Handle 404 Not Found Routes with Wildcards 02:41
  72. 72 Lazy-Loading Feature Modules 07:49
  73. 73 Declarative Navigation with routerLink Directives 06:15
  74. 74 Dynamic Route Params and ActivatedRoute 06:48
  75. 75 Pass Custom Data to Routed Components 08:15
  76. 76 Programmatic Navigation with Router.navigate() 05:21
  77. 77 The Idea Behind Standalone Angular 07:20
  78. 78 Bootstrap a Standalone Component instead of NgModule 05:36
  79. 79 Providing a Route Config via importProvidersFrom 05:59
  80. 80 Import NgModules into Standalone Components 03:50
  81. 81 Lazy-Load Component-Less Route Configs 04:33
  82. 82 Providing Standalone Directives, Components and Pipes 10:15
  83. 83 Code Split and Lazy-Load at the Component Level 04:34
  84. 84 Scoped or Component-Level Providers and “providedIn” 03:45

Related courses

  • Conscious Angular Testing thumbnail

    Conscious Angular Testing

    Sources: Dmytro Mezhenskyi
    Write Tests Consciously. At the end of the course, you will be able to write and debug tests with a full and in-depth understanding of what you are doing and ho
    10 hours 37 minutes 7 seconds
  • Angular 9 Firebase Project Course thumbnail

    Angular 9 Firebase Project Course

    Sources: Fireship
    The Angular Firebase PWA Course will teach you how to build a complex progressive web app with Angular 9 (ivy), Material Design, and Firebase. It starts from ab
    2 hours 46 minutes 56 seconds
  • Angular - The Complete Guide thumbnail

    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 Basics (v15) about?
Master the essentials of Angular with a comprehensive course on modern best practices and patterns honed from years of evolution in web development . Learn to create a scalable architecture, utilize immutable data structures, and implement…
Who teaches Angular Basics (v15)?
Angular Basics (v15) is taught by Ultimate Courses (Todd Motto). You can find more courses by this instructor on the corresponding source page.
How long is Angular Basics (v15)?
Angular Basics (v15) contains 84 lessons with a total runtime of 8 hours 58 minutes. All lessons are available to watch online at your own pace.
Is Angular Basics (v15) free to watch?
Angular Basics (v15) 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 Basics (v15) online?
Angular Basics (v15) is available to watch online on CourseFlix at https://courseflix.net/course/angular-basics-v15. The page hosts every lesson with the integrated video player; no download is required.