Angular - The Complete Guide
Master Angular (formerly "Angular 2") and build awesome, reactive web apps with the successor of Angular.js.
About This Course
Welcome to "Angular - The Complete Guide"!
Angular is one of the most popular web development frameworks you can learn these days - especially in the enterprise landscape.
It offers amazing performance, a versatile syntax & API, a "batteries-included" philosophy where key features like routing are included, and an active and helpful community.
With this course, you'll learn Angular from the ground up and in great detail - all whilst building multiple demo projects. Therefore, concepts are explained & explored not just in theory, but instead by applying your knowledge to real problems!
This is a huge course because it really covers EVERYTHING you need to know and learn to become an Angular developer!
Why Learn Angular?
No matter if you know nothing about Angular or if you already got some basic Angular knowledge (not required but also not a problem), you will get tons of useful information and knowledge out of this course! My goal is to ensure that you feel confident working with Angular, so that you can apply for Angular jobs, use it in your own projects or simply enhance your portfolio as a developer - whatever your goal is: This course gets you there!
What's in This Course?
The course starts with a very thorough "Essentials" section that will get you up and running with Angular's core features in just a few hours! After that, a vast selection of "Deep Dive" sections allows you to dive deeper into core and advanced Angular concepts & features.
Core Essentials
A thorough introduction to Angular: What is it and why would you use it? Learn how Angular works, building components with Angular & building UIs with Angular.
Components & Data Binding
Master components, inputs, outputs & dynamic data binding (with and without signals). Work with user events and state to create interactive applications.
Services & Architecture
Learn how to use crucial concepts like services to connect components or outsource data. Get a thorough look behind the scenes to understand how Angular works under the hood.
Routing & HTTP
Master routing to create multi-page applications. Learn sending HTTP requests & handling transitional states + responses for real-world applications.
In Detail, You'll Learn
This course covers everything you need to build production-ready Angular applications with multiple real projects where all concepts are applied step-by-step.
Core Concepts
Master these essential Angular skills:
- All the core essentials: How Angular works & building UIs
- Components, inputs, outputs & dynamic data binding
- Working with user events and state
- Services to connect components or outsource data
- Working with lists and conditional content
- Styling Angular apps with scoped styles
Advanced Topics
Take your skills to the next level:
- Signals and change detection
- Building and using directives & pipes
- Handling forms and user input (incl. validation)
- Routing to create multi-page applications
- Sending HTTP requests & handling responses
- Deploying Angular & TypeScript Introduction
Multiple Demo Projects Included!
This course includes multiple complete demo projects where you'll apply all core concepts! Angular has also changed since its original release back in 2016 - whilst the course focuses on the latest & most modern Angular syntax, it also covers older Angular features so you'll be able to use your knowledge no matter which Angular version you might be using!
No Prior Angular Knowledge Required
See The Course In Action
Curriculum
- Module Introduction (1:19)
- A New Starting Project & Analyzing The Project Structure (7:46)
- Understanding Components & How Content Ends Up On The Screen (6:18)
- Creating a First Custom Component (6:08)
- [Optional] JavaScript Refresher: Classes, Properties & More
- Configuring the Custom Component (6:42)
- Using the Custom Component (6:08)
- Styling the Header Component & Adding An Image (6:20)
- Managing & Creating Components with the Angular CLI (4:28)
- Styling & Using Our Next Custom Component (5:08)
- Preparing User Data (To Output Dynamic Content) (2:07)
- Storing Data in a Component Class (3:55)
- Outputting Dynamic Content with String Interpolation (2:30)
- Attribute Binding
- Property Binding & Outputting Computed Values (4:37)
- Using Getters For Computed Values (3:29)
- Listening to Events with Event Binding (4:04)
- Managing State & Changing Data (3:06)
- A Look Behind The Scenes Of Angular's Change Detection Mechanism (2:06)
- Introducing Signals (12:53)
- We Need More Flexible Components! (3:40)
- Defining Component Inputs (8:17)
- Required & Optional Inputs (2:56)
- Using Signal Inputs (14:00)
- We Need Custom Events! (1:47)
- Working with Outputs & Emitting Data (6:59)
- Using the output() Function (6:12)
- Adding Extra Type Information To EventEmitter (1:57)
- Exercise: Create a Configurable Component (8:47)
- TypeScript: Working With Potentially Undefined Values & Union Types (8:06)
- Accepting Objects As Inputs & Adding Appropriate Typings (4:46)
- TypeScript: Type Aliases & Interfaces (3:11)
- Outputting List Content (5:33)
- Outputting Conditional Content (4:26)
- Legacy Angular: Using ngFor & ngIf (5:21)
- Adding More Components to the Demo App (6:14)
- Outputting User-specific Tasks (6:30)
- Outputting Task Data in the Task Component (4:04)
- Storing Data Models in Separate Files (3:44)
- Dynamic CSS Styling with Class Bindings (4:36)
- More Component Communication: Deleting Tasks (5:25)
- Creating & Conditionally Rendering Another Component (5:25)
- Managing The "New Task" Dialog (6:30)
- Using Directives & Two-Way-Binding (10:46)
- Signals & Two-Way-Binding (2:19)
- Handling Form Submission (3:20)
- Using the Submitted Data (7:20)
- Content Projection with ng-content (6:48)
- Transforming Template Data with Pipes (3:16)
- Getting Started with Services (6:15)
- Getting Started with Dependency Injection (8:02)
- More Service Usage & Alternative Dependency Injection Mechanism (5:17)
- Time to Practice: Services (3:16)
- Using localStorage for Data Storage (5:40)
- Module Summary (8:45)
- Module Introduction (2:16)
- A First Introduction To Angular Modules (NgModule) (3:05)
- Creating a First Empty Module (2:56)
- Bootstrapping Apps with Angular Modules (5:21)
- Declaring & Using Components (4:46)
- A First Summary (2:14)
- Migrating All Components To Use Modules (6:50)
- Creating & Using Shared Modules (4:13)
- Creating More Complex Module-based App Structures (7:22)
- Module Introduction & Starting Project (5:19)
- Exercise Hints
- Adding a Header Component With An Image (5:10)
- Adding a User Input Component (6:42)
- Handling Form Submission (2:30)
- Extracting Values with Two-Way-Binding (8:10)
- Calculating the Annual Investment Data (5:05)
- Cross-Component Communication with Outputs (9:25)
- Creating & Using a Data Model (2:58)
- Passing Data from Parent to Child with Inputs (10:09)
- Outputting Data in a Table (4:57)
- Formatting Output with a Pipe (1:39)
- Using Signals & Resetting The Form After Submission (9:55)
- Using a Service for Cross-Component Communication (9:35)
- Using Signals in Services (4:11)
- Migrating to Angular Modules (8:08)
- Module Summary (1:13)
- Module Introduction (2:00)
- Starting Project & An Opportunity For Smaller Components? (2:34)
- When & How To Split Up Components (4:25)
- Splitting A Component Into Multiple Components (8:45)
- Creating Reusable Components (3:58)
- Component Inputs: Repetition (5:22)
- Property Binding: Repetition (8:31)
- Using Content Projection & ng-content (2:58)
- Adding Forms to Components (6:01)
- A Possible, But Not Ideal Way Of Extending Built-in Elements (4:27)
- Extending Built-in Elements with Custom Components via Attribute Selectors (5:08)
- Supporting Content Projection with Multiple Slots (6:32)
- Exploring Advanced Content Projection (3:10)
- Defining Content Projection Fallbacks (2:09)
- Multi-Element Custom Components & Content Projection (7:28)
- Scoping CSS Styles to Components (5:03)
- Understanding & Configuring View Encapsulation (5:22)
- Making Sense of Component Host Elements (2:52)
- Using Host Elements Like Regular Elements (4:30)
- Interacting With Host Elements From Inside Components (2:06)
- When (Not) To Rely On Host Elements (6:08)
- Interacting with Host Elements via @HostListener & @HostBinding (5:14)
- Accessing Host Elements Programmatically (4:03)
- Class Bindings: Repetition (4:24)
- There's More Than One Way Of Binding CSS Classes Dynamically (3:16)
- A Closer Look At Dynamic Inline Style Binding (3:30)
- Manipulating State & Using Literal Values (4:42)
- Introducing the Component Lifecycle: ngOnInit (4:02)
- Implementing Lifecycle Interfaces (3:11)
- Component Lifecycle - A Deep Dive (15:16)
- Component Cleanup with ngOnDestroy (4:07)
- Component Cleanup with DestroyRef (2:48)
- Handling Form Submissions: Repetition (2:46)
- Working with Template Variables (7:13)
- Extracting Input Values via Template Variables (1:54)
- Template Variables & Component Instances (2:35)
- Getting Access to Template Elements via ViewChild (9:27)
- Using The viewChild Signal Function (6:22)
- ViewChild vs ContentChild (6:58)
- A Closer Look at Decorator-based Queries & Lifecycle Hooks (4:57)
- The afterRender and afterNextRender Lifecycle Functions (3:08)
- Making Sense of Signal Effects (5:28)
- Signal Effects Cleanup Functions
- TypeScript & Type Models: Repetition (3:31)
- Component Outputs: Repetition (4:23)
- A Closer Look At Template For Loops (5:53)
- Revisiting Inputs & Signals (5:00)
- Updating Signal Values (4:50)
- Cross-Component Communication & State Management (6:13)
- Configuring Component Inputs & Outputs (4:06)
- Two-Way Binding: Repetition (3:55)
- Setting Up Custom Two-Way Binding (8:54)
- An Easier Way of Setting Up Custom Two-Way Binding (3:53)
- Module Introduction (1:03)
- Understanding Directives (2:57)
- The Starting Project (1:04)
- Analyzing a Built-in Attribute Directive: ngModel (5:41)
- Analyzing a Built-in Structural Directive: ngIf (6:29)
- Getting Started with Custom Directives (8:10)
- Using Attribute Directives To Change Element Behavior (4:47)
- Working with Inputs in Custom Directives (8:51)
- Directives & Dependency Injection (4:09)
- Building Another Directive (7:56)
- Building a Custom Structural Directive (8:22)
- Structural Directives & Syntactic Sugar (3:07)
- Host Directives & Composition (7:59)
- Module Introduction (0:36)
- Making Sense of Pipes (2:55)
- Using Built-in Pipes (2:56)
- More Built-in Pipes Examples (4:18)
- Building a First Custom Pipe (5:57)
- Using Custom Pipes to Perform Custom Transformations (3:49)
- Accepting Parameters in Custom Pipes (5:57)
- Chaining Pipes & Being Aware of Limitations (4:44)
- Building a Pipe That Sorts Items (6:45)
- Understanding How Pipes Are Executed (4:14)
- Pure & Impure Pipes (1:44)
- Pipe Limitations & When Not To Use Them (2:53)
- The Starting Project & The Need For A Centralized Service (3:14)
- Module Introduction (0:59)
- Creating a Service (7:27)
- How NOT To Provide A Service (2:23)
- Using Angular's Dependency Injection Mechanism (5:01)
- Using The Alternative Dependency Injection Syntax (5:27)
- Outsourcing & Reusing Logic with Services (10:56)
- Angular Has Multiple Injectors! (4:23)
- There Are Multiple Ways Of Providing a Service (4:16)
- Providing Services via the Element Injector (3:16)
- Understanding the Element Injector's Behavior (3:44)
- Injecting Services Into Services (5:26)
- Analyzing Dependency Injection with the Angular DevTools (2:29)
- Using Custom DI Tokens & Providers (8:27)
- Preparing A Non-Class Value For Injection (5:24)
- Injecting Other Values (NOT Services) (10:25)
- Angular Modules (NgModule) & Dependency Injection (3:05)
- Working with Services Without Using Signals (2:16)
- Module Introduction (1:52)
- Analyzing the Starting Project (1:52)
- Understanding How Angular Performs Change Detection (4:44)
- Change Detection During Development: ExpressionChangedAfterChecked Errors (2:45)
- Writing Efficient Template Bindings (1:19)
- Avoiding Zone Pollution (5:18)
- Using the OnPush Strategy (3:21)
- Understanding the OnPush Strategy (8:37)
- Working with OnPush & Signals (2:13)
- Using Signals for Sharing Data Across Components (with OnPush) (4:11)
- The Problem With OnPush, Cross-Component Data & Not Using Signals (3:12)
- Triggering Change Detection Manually & Using RxJS Subjects (11:01)
- Introducing The async Pipe (4:32)
- Going Zoneless! (12:58)
- Module Introduction (0:52)
- What Are Observables & What Is RxJS? (1:07)
- Creating & Using an Observable (9:17)
- Working with RxJS Operators (5:34)
- Working with Signals (5:13)
- Signals vs Observables (6:00)
- Converting Signals To Observables (3:49)
- Converting Observables To Signals (4:53)
- Deep Dive: Creating & Using A Custom Observable From Scratch (12:24)
- Module Summary (2:38)
- Module Introduction (1:28)
- The Starting Projects: Frontend & Backend (4:42)
- How To Connect Angular Apps To A Backend (4:02)
- Optional: HTTP Essentials
- Getting Started with Angular's Http Client (4:23)
- Providing the HttpClient when using NgModules
- Sending a GET Request To Fetch Data (7:53)
- Configuring Http Requests (3:40)
- Transforming & Using Response Data (2:51)
- Showing a Loading Fallback (3:11)
- Handling HTTP Errors (10:45)
- Sending Data To A Backend (7:09)
- More Data Fetching & Some Code Duplication (4:34)
- Outsourcing HTTP Request Logic Into A Service (8:58)
- Managing HTTP-loaded Data via a Service (4:54)
- Implementing Optimistic Updating (2:41)
- Potential Problems Introduced by Optimistic Updating (2:06)
- Improved Optimistic Updating (5:09)
- Implementing App-wide Error Management (7:07)
- Practice: Sending DELETE Requests (8:24)
- Introducing HTTP Interceptors (6:57)
- Optional: Class-based Interceptors
- Introducing HTTP Response Interceptors (3:03)
- Template-driven vs Reactive Forms (2:53)
- Module Introduction (2:27)
- Template-driven: Registering Form Controls (6:00)
- Getting Access to the Angular-managed Form (8:31)
- Extracting User Input Values (2:46)
- Validating Input with Form Validation Directives (6:09)
- Using the Form Validation Status To Provide User Feedback (7:33)
- Adding Validation Styles (4:45)
- Interacting With The Underlying Form Object In The Component (13:10)
- Updating Form Values Programmatically (5:29)
- Reactive Forms: Getting Started (5:18)
- Syncing Reactive Form Definition & Template (3:36)
- Handling Form Submission (Reactive Forms) (3:15)
- Adding Validators To Reactive Forms (6:35)
- Building Custom Validators (5:21)
- Creating & Using Async Validators (3:54)
- Interacting with the Form Programmatically (8:38)
- Exercise: Problem (2:18)
- Exercise: Solution (4:37)
- Connecting & Registering Inputs For A Complex Form (8:58)
- Working with Nested Form Groups (5:29)
- Working with Form Arrays (4:44)
- Practice: Adding More Validation (3:31)
- Creating Multi-Input Validators / Form Group Validators (7:50)
- Module Summary (1:30)
- Module Introduction (1:57)
- What Is Routing? (2:35)
- Enabling Routing & Adding a First Route (6:15)
- Rendering Routes (3:34)
- Registering Multiple Routes (3:14)
- Adding Links The Right Way (5:50)
- Styling Active Navigation Links (2:53)
- Setting Up & Navigating To Dynamic Routes (7:23)
- Extracting Dynamic Route Parameters via Inputs (5:33)
- Extracting Dynamic Route Parameters via @Input()
- Extracting Dynamic Route Parameters via Observables (7:59)
- Working with Nested Routes (5:30)
- Route Links & Relative Links (2:35)
- Accessing Parent Route Data From Inside Nested Routes (4:32)
- Loading Data Based On Route Parameters In Child Routes (2:15)
- Link Shortcuts & Programmatic Navigation (6:37)
- Adding A "Not Found" Route (1:46)
- Redirecting Users (5:09)
- Splitting Route Definitions Across Multiple Files (2:50)
- Activated Route vs Activated Route Snapshot (3:38)
- Setting Query Parameters (5:35)
- Extracting Query Parameters via Inputs (3:16)
- Extracting Query Parameters via Observables (3:22)
- Using Query Parameters For Data Manipulation (3:37)
- Adding Static Data To Routes (5:06)
- Resolving Route-related Dynamic Data (11:22)
- Optional: Class-based Resolvers
- Accessing Route Data In Components (2:46)
- Controlling Route Resolver Execution (3:08)
- Setting & Resolving Titles (4:14)
- Introducing Route Guards (9:18)
- Optional: Class-based Guards
- Making Sense of The CanDeactivate Guard (4:56)
- Improving The CanDeactivate Logic (2:59)
- Reloading Pages via the Angular Router & Configuring Programmatic Navigation (5:46)
- Module Introduction (1:04)
- What Is Lazy Loading / Code Splitting? (1:36)
- Introducing Route-based Lazy Loading (2:49)
- Implementing Route-based Lazy Loading (8:14)
- Lazy Loading Entire Route Groups (5:19)
- Using Lazy Loading & Routing to Lazy-load Services (3:58)
- Introducing Deferrable Views (3:09)
- Defer Loading Until Viewport Visibility (3:47)
- Deferrable Views: Using Other Triggers (1:36)
- Prefetching Lazy-loaded Code (1:59)
- Deferrable Views: Summary (2:06)
- Module Introduction (1:08)
- The Starting Project
- Preparing a Project For Deployment: Building It For Production (4:56)
- Building SPAs: Pros & Cons (3:42)
- SPAs: Deployment Example (7:54)
- Using "ng add", "ng deploy" & Angular's Built-in Deployment Support (2:16)
- Server-side Rendering (SSR) Introduction (3:39)
- Setting Up SSR For An Angular App (4:12)
- Building and Service an SSR App (2:36)
- Authoring SSR-ready Code (Beware of Pitfalls!) (3:53)
- SSR and Client-Server Mismatches (3:37)
- Static Site Generation (SSG) Introduction (2:55)
- Configuring & Using SSG (5:34)
- Deployment Methods - A Summary (0:54)
- SSR & SSG Deployment Example
- Module Introduction (1:15)
- What & Why? (6:32)
- Installing & Using TypeScript (6:22)
- Base Types & Primitives (3:55)
- Array & Object Types (5:33)
- Type Inference (2:47)
- Working with Union Types (2:48)
- Assigning Type Aliases (2:42)
- Diving into Functions & Function Types (5:12)
- Understanding Generics (7:20)
- Classes & TypeScript (7:58)
- Working with Interfaces (5:36)
- Configuring the TypeScript Compiler (2:29)
- Module Resources
Course Prerequisites
Here's what you need to get the most out of this course
- Basic JavaScript knowledge is required
- NO prior Angular or TypeScript knowledge required.
All pre-requisites are covered by courses in our "Academind Pro" Membership.
Your Instructor
Maximilian Schwarzmüller
Founder & Instructor
Self-taught developer with 3,500,000+ students and 900,000 YouTube subscribers. I co-founded Academind with Manuel Lorenz to help people master new skills and build amazing projects.
Join 2729 happy students!
Choose the plan that works best for you
Single-Course License
Full access to "Angular - The Complete Guide"
This is a one-time payment that grants access to this course only, not to any other courses.
Academind Pro Membership
Unlimited access to this and all other current & future courses!
This is a recurring payment. You can cancel anytime from your profile. For more info, contact Academind.
Continue Your Learning Journey
Expand your skills with these hand-picked courses that complement what you'll learn here.
