Angular newcomers
You’ve never built with Angular (and don’t know AngularJS/Angular 1), but you want a clear path that gets you building real apps without feeling lost in the framework.
Angular - The Complete Guide
Master Angular (formerly "Angular 2") and build awesome, reactive web apps with the successor of Angular.js.
Course Overview
About This Course
You’ve tried to pick up Angular from docs and scattered tutorials, but it’s hard to tell what’s essential, what’s optional, and why your app behaves the way it does. You can copy code, yet the “how does this actually work?” part still feels fuzzy.
In this course, you’ll build understanding step-by-step: you start with a clean setup, then grow real features in a way that mirrors how Angular apps are structured in practice. Along the way, you’ll write in TypeScript and use the same workflow Angular developers rely on every day.
By the end, you’ll be able to design and ship Angular applications that feel modern and solid: you’ll know how to structure features, connect to backends, protect user areas, handle user input confidently, and take an app all the way to deployment.
What You'll Learn
You’ll cover the core building blocks of Angular apps—plus the workflows needed to turn them into scalable, production-ready features.
Angular architecture fluency
Explain how an Angular application is put together and make confident structural decisions as your codebase grows—so you’re not guessing where logic belongs or how features should be organized.
TypeScript in Angular
Write Angular code in TypeScript effectively, using it as a practical tool for building features—not as an extra hurdle—so your components and services stay maintainable as complexity increases.
Components and directives
Build reusable UI with components and create custom directives when you need behavior that doesn’t fit a component, using Angular’s modern approach (including standalone components & signals).
Navigation with routing
Implement routing to handle navigation in single-page applications, define routes cleanly, and control how users move through your app as it grows beyond a few screens.
Forms that scale
Create and manage complex forms that handle real user input reliably, so validation, state, and submission logic don’t turn into brittle, hard-to-debug code.
Data, auth, and state
Send HTTP requests to REST APIs, add authentication to protect features, and get introduced to NgRx for complex state management when your app needs predictable, centralized state.
Ready to get started?
See enrollment optionsPrerequisites
No prior Angular knowledge is required.
Basic JavaScript and web development knowledge is required.
Who Is This Course For?
Frontend developers
You already build for the web and want to add Angular as a serious tool in your stack, with enough depth to make good decisions on larger, more complex projects.
Career-focused learners
You’re aiming to establish yourself as a frontend developer and need a strong, practical understanding of Angular so you can contribute confidently to modern web applications.
Curriculum Overview
Start NowPreview the structure and pacing of this course before you begin.
Getting Started29m
- 01Welcome To The Course!1:31 min
- 02What Exactly Is Angular?1:49 min
- 03Why Would You Use Angular?6:41 min
- 04Angular's Evolution & Stability4:44 min
- 05Creating A New Angular Project7:42 min
- 06Setting Up An Angular Development Environment4:48 min
- 07About This Course1:45 min
- 08Course Resources & Using The Course Efficiently0:00 min
Angular Essentials - Components, Templates, Services & More4h 48m
- 01Module Introduction1:19 min
- 02A New Starting Project & Analyzing The Project Structure7:46 min
- 03Understanding Components & How Content Ends Up On The Screen6:18 min
- 04Creating a First Custom Component6:08 min
- 05[Optional] JavaScript Refresher: Classes, Properties & More0:00 min
- 06Configuring the Custom Component6:42 min
- 07Using the Custom Component6:08 min
- 08Styling the Header Component & Adding An Image6:20 min
- 09Managing & Creating Components with the Angular CLI4:28 min
- 10Styling & Using Our Next Custom Component5:08 min
- 11Preparing User Data (To Output Dynamic Content)2:07 min
- 12Storing Data in a Component Class3:55 min
- 13Outputting Dynamic Content with String Interpolation2:30 min
- 14Property Binding & Outputting Computed Values4:37 min
- 15Attribute Binding0:00 min
- 16Using Getters For Computed Values3:29 min
- 17Listening to Events with Event Binding4:04 min
- 18Managing State & Changing Data3:06 min
- 19A Look Behind The Scenes Of Angular's Change Detection Mechanism2:06 min
- 20Introducing Signals12:53 min
- 21We Need More Flexible Components!3:40 min
- 22Defining Component Inputs8:17 min
- 23Required & Optional Inputs2:56 min
- 24Using Signal Inputs14:00 min
- 25We Need Custom Events!1:47 min
- 26Working with Outputs & Emitting Data6:59 min
- 27Using the output() Function6:12 min
- 28Adding Extra Type Information To EventEmitter1:57 min
- 29Exercise: Create a Configurable Component8:47 min
- 30TypeScript: Working With Potentially Undefined Values & Union Types8:06 min
- 31Accepting Objects As Inputs & Adding Appropriate Typings4:46 min
- 32TypeScript: Type Aliases & Interfaces3:11 min
- 33Outputting List Content5:33 min
- 34Outputting Conditional Content4:26 min
- 35Legacy Angular: Using ngFor & ngIf5:21 min
- 36Adding More Components to the Demo App6:14 min
- 37Outputting User-specific Tasks6:30 min
- 38Outputting Task Data in the Task Component4:04 min
- 39Storing Data Models in Separate Files3:44 min
- 40Dynamic CSS Styling with Class Bindings4:36 min
- 41More Component Communication: Deleting Tasks5:25 min
- 42Creating & Conditionally Rendering Another Component5:25 min
- 43Managing The "New Task" Dialog6:30 min
- 44Using Directives & Two-Way-Binding10:46 min
- 45Signals & Two-Way-Binding2:19 min
- 46Handling Form Submission3:20 min
- 47Using the Submitted Data7:20 min
- 48Content Projection with ng-content6:48 min
- 49Transforming Template Data with Pipes3:16 min
- 50Getting Started with Services6:15 min
- 51Getting Started with Dependency Injection8:02 min
- 52More Service Usage & Alternative Dependency Injection Mechanism5:17 min
- 53Time to Practice: Services3:16 min
- 54Using localStorage for Data Storage5:40 min
- 55Module Summary8:45 min
Angular Essentials - Working with Modules39m
- 01Module Introduction2:16 min
- 02A First Introduction To Angular Modules (NgModule)3:05 min
- 03Creating a First Empty Module2:56 min
- 04Bootstrapping Apps with Angular Modules5:21 min
- 05Declaring & Using Components4:46 min
- 06A First Summary2:14 min
- 07Migrating All Components To Use Modules6:50 min
- 08Creating & Using Shared Modules4:13 min
- 09Creating More Complex Module-based App Structures7:22 min
Angular Essentials - Time To Practice1h 35m
- 01Module Introduction & Starting Project5:19 min
- 02Exercise Hints0:00 min
- 03Adding a Header Component With An Image5:10 min
- 04Adding a User Input Component6:42 min
- 05Handling Form Submission2:30 min
- 06Extracting Values with Two-Way-Binding8:10 min
- 07Calculating the Annual Investment Data5:05 min
- 08Cross-Component Communication with Outputs9:25 min
- 09Creating & Using a Data Model2:58 min
- 10Passing Data from Parent to Child with Inputs10:09 min
- 11Outputting Data in a Table4:57 min
- 12Formatting Output with a Pipe1:39 min
- 13Using Signals & Resetting The Form After Submission9:55 min
- 14Using a Service for Cross-Component Communication9:35 min
- 15Using Signals in Services4:11 min
- 16Migrating to Angular Modules8:08 min
- 17Module Summary1:13 min
Debugging Angular Apps15m
- 01Module Introduction1:41 min
- 02Understanding Error Messages & Fixing Errors3:46 min
- 03Debugging Logical Errors with the Browser DevTools & Breakpoints6:19 min
- 04Exploring the Angular DevTools3:50 min
- 05What Next?0:00 min
Components & Templates - Deep Dive4h 15m
- 01Module Introduction2:00 min
- 02Starting Project & An Opportunity For Smaller Components?2:34 min
- 03When & How To Split Up Components4:25 min
- 04Splitting A Component Into Multiple Components8:45 min
- 05Creating Reusable Components3:58 min
- 06Component Inputs: Repetition5:22 min
- 07Property Binding: Repetition8:31 min
- 08Using Content Projection & ng-content2:58 min
- 09Adding Forms to Components6:01 min
- 10A Possible, But Not Ideal Way Of Extending Built-in Elements4:27 min
- 11Extending Built-in Elements with Custom Components via Attribute Selectors5:08 min
- 12Supporting Content Projection with Multiple Slots6:32 min
- 13Exploring Advanced Content Projection3:10 min
- 14Defining Content Projection Fallbacks2:09 min
- 15Multi-Element Custom Components & Content Projection7:28 min
- 16Scoping CSS Styles to Components5:03 min
- 17Understanding & Configuring View Encapsulation5:22 min
- 18Making Sense of Component Host Elements2:52 min
- 19Using Host Elements Like Regular Elements4:30 min
- 20Interacting With Host Elements From Inside Components2:06 min
- 21When (Not) To Rely On Host Elements6:08 min
- 22Interacting with Host Elements via @HostListener & @HostBinding5:14 min
- 23Accessing Host Elements Programmatically4:03 min
- 24Class Bindings: Repetition4:24 min
- 25There's More Than One Way Of Binding CSS Classes Dynamically3:16 min
- 26A Closer Look At Dynamic Inline Style Binding3:30 min
- 27Manipulating State & Using Literal Values4:42 min
- 28Introducing the Component Lifecycle: ngOnInit4:02 min
- 29Implementing Lifecycle Interfaces3:11 min
- 30Component Lifecycle - A Deep Dive15:16 min
- 31Component Cleanup with ngOnDestroy4:07 min
- 32Component Cleanup with DestroyRef2:48 min
- 33Handling Form Submissions: Repetition2:46 min
- 34Working with Template Variables7:13 min
- 35Extracting Input Values via Template Variables1:54 min
- 36Template Variables & Component Instances2:35 min
- 37Getting Access to Template Elements via ViewChild9:27 min
- 38Using The viewChild Signal Function6:22 min
- 39ViewChild vs ContentChild6:58 min
- 40A Closer Look at Decorator-based Queries & Lifecycle Hooks4:57 min
- 41The afterRender and afterNextRender Lifecycle Functions3:08 min
- 42Signal Effects Cleanup Functions0:00 min
- 43Making Sense of Signal Effects5:28 min
- 44TypeScript & Type Models: Repetition3:31 min
- 45Component Outputs: Repetition4:23 min
- 46A Closer Look At Template For Loops5:53 min
- 47Revisiting Inputs & Signals5:00 min
- 48Updating Signal Values4:50 min
- 49Cross-Component Communication & State Management6:13 min
- 50Configuring Component Inputs & Outputs4:06 min
- 51Two-Way Binding: Repetition3:55 min
- 52Setting Up Custom Two-Way Binding8:54 min
- 53An Easier Way of Setting Up Custom Two-Way Binding3:53 min
Enhancing Elements with Directives - Deep Dive1h 10m
- 01Module Introduction1:03 min
- 02Understanding Directives2:57 min
- 03The Starting Project1:04 min
- 04Analyzing a Built-in Attribute Directive: ngModel5:41 min
- 05Analyzing a Built-in Structural Directive: ngIf6:29 min
- 06Getting Started with Custom Directives8:10 min
- 07Using Attribute Directives To Change Element Behavior4:47 min
- 08Working with Inputs in Custom Directives8:51 min
- 09Directives & Dependency Injection4:09 min
- 10Building Another Directive7:56 min
- 11Building a Custom Structural Directive8:22 min
- 12Structural Directives & Syntactic Sugar3:07 min
- 13Host Directives & Composition7:59 min
Transforming Values with Pipes - Deep Dive46m
- 01Module Introduction0:36 min
- 02Making Sense of Pipes2:55 min
- 03Using Built-in Pipes2:56 min
- 04More Built-in Pipes Examples4:18 min
- 05Building a First Custom Pipe5:57 min
- 06Using Custom Pipes to Perform Custom Transformations3:49 min
- 07Accepting Parameters in Custom Pipes5:57 min
- 08Chaining Pipes & Being Aware of Limitations4:44 min
- 09Building a Pipe That Sorts Items6:45 min
- 10Understanding How Pipes Are Executed4:14 min
- 11Pure & Impure Pipes1:44 min
- 12Pipe Limitations & When Not To Use Them2:53 min
And 10 more sections in the full course.
Ready to Get Started?
Choose the option that works best for you.
Single Course
Angular - The Complete Guide
One Payment. Lifetime Access.
$99one-time
- One-time payment
- All future updates for this course
- Downloadable resources & code
- Certificate of completion
- Hands-on exercises & projects
- Self-paced learning
- English captions on all videos
- Lifetime access
Most Popular
All-Access Membership
Everything we teach. One subscription.
$25/mo
$4,729+ worth of courses
- Full access to all courses
- All future courses included
- Downloadable resources & code
- Certificates of completion
- Hands-on exercises & projects
- Self-paced learning
- English captions on all videos
- Cancel anytime