Autoplay
Autocomplete
Previous Lesson
Complete and Continue
[LEGACY] Angular - The Complete Guide
Getting Started
Course Introduction (0:57)
What is Angular? (1:59)
Angular vs Angular 2 vs Latest Version (2:55)
Angular Setup & First App (8:08)
Join our Online Learning Community
Editing the First App (10:05)
The Course Structure (4:00)
How to get the Most out of the Course (2:25)
What is TypeScript? (2:09)
A Basic Project Setup using Bootstrap for Styling (4:27)
Where to find the Course Source Code
The Academind Pro Referral Program
The Basics
Module Introduction (0:56)
How an Angular App gets Loaded and Started (7:11)
Components are Important! (3:08)
Creating a New Component (6:51)
Understanding the Role of AppModule and Component Declaration (5:15)
Using Custom Components (1:12)
Creating Components with the CLI & Nesting Components (3:51)
Working with Component Templates (3:08)
Working with Component Styles (4:02)
Fully Understanding the Component Selector (3:50)
Assignment: Component Basics (Problem) (1:33)
Assignment: Component Basics (Solution) (6:42)
What is Databinding? (2:49)
String Interpolation (5:19)
Property Binding (6:34)
Property Binding vs String Interpolation (3:07)
Event Binding (4:09)
Passing and Using Data with Event Binding (4:37)
Two-Way-Databinding (2:47)
Combining all Forms of Databinding (1:46)
Assignment: Data & Event Binding (Problem) (1:07)
Assignment: Data & Event Binding (Solution) (5:12)
Understanding Directives (2:17)
Using ngIf to Output Data Conditionally (3:52)
Enhancing ngIf with an Else Condition (2:46)
Angular 17: NgIf Alternative
Styling Elements Dynamically with ngStyle (5:01)
Applying CSS Classes Dynamically with ngClass (2:53)
Outputting Lists with ngFor (3:43)
Angular 17: NgFor Alternative
Assignment: Directives (Problem) (2:15)
Assignment: Directives (Solution) (7:06)
Getting the Index when using ngFor (2:52)
Course Project - The Basics
Project Introduction (1:04)
Planning the App (5:33)
Setting up the Application (4:31)
Creating the Components (9:32)
Using the Components (3:15)
Adding a Navigation Bar (5:09)
Creating a "Recipe" Model (4:33)
Adding Content to the Recipes Components (7:41)
Outputting a List of Recipes with ngFor (4:37)
Displaying Recipe Details (5:52)
Working on the ShoppingListComponent (1:49)
Creating an "Ingredient" Model (2:35)
Creating and Outputting the Shopping List (2:27)
Adding a Shopping List Edit Section (3:28)
Wrap Up & Next Steps (0:54)
Debugging
Understanding Angular Error Messages (4:36)
Debugging Code in the Browser Using Sourcemaps (5:32)
Components & Databinding Deep Dive
Module Introduction (0:36)
Splitting Apps into Components (5:56)
Property & Event Binding Overview (1:44)
Binding to Custom Properties (5:43)
Assigning an Alias to Custom Properties (1:59)
Binding to Custom Events (9:05)
Assigning an Alias to Custom Events (0:57)
Custom Property and Event Binding Summary (2:02)
Understanding View Encapsulation (4:59)
More on View Encapsulation (2:43)
Using Local References in Templates (4:36)
Getting Access to the Template & DOM with @ViewChild (5:02)
Projecting Content into Components with ng-content (3:22)
Understanding the Component Lifecycle (4:54)
Seeing Lifecycle Hooks in Action (11:54)
Lifecycle Hooks and Template Access (2:33)
Getting Access to ng-content with @ContentChild (3:00)
Wrap Up (0:49)
Assignment: Components & Databinding (Problem) (2:17)
Assignment: Components & Databinding (Solution) (12:21)
Course Project - Components & Databinding
Introduction (0:50)
Adding Navigation with Event Binding and ngIf (7:31)
Passing Recipe Data with Property Binding (4:43)
Passing Data with Event and Property Binding (Combined) (10:31)
Allowing the User to Add Ingredients to the Shopping List (7:22)
Directives Deep Dive
Module Introduction (1:23)
ngFor and ngIf Recap (3:36)
ngClass and ngStyle Recap (2:56)
Creating a Basic Attribute Directive (6:42)
Using the Renderer to build a Better Attribute Directive (7:04)
Using HostListener to Listen to Host Events (3:00)
Using HostBinding to Bind to Host Properties (3:17)
Binding to Directive Properties (6:43)
What Happens behind the Scenes on Structural Directives (3:04)
Building a Structural Directive (6:13)
Understanding ngSwitch (2:49)
Course Project - Directives
Building and Using a Dropdown Directive (6:25)
Using Services & Dependency Injection
Module Introduction (1:39)
Why would you Need Services? (2:04)
Creating a Logging Service (3:32)
Injecting the Logging Service into Components (6:21)
Creating a Data Service (6:41)
Understanding the Hierarchical Injector (2:40)
How many Instances of Service Should It Be? (2:12)
Injecting Services into Services (5:13)
Using Services for Cross-Component Communication (4:06)
Services in Angular 6+
Assignment: Services (Problem) (1:44)
Assignment: Services (Solution) (9:37)
Course Project - Services & Dependency Injection
Introduction (1:23)
Setting up the Services (1:15)
Managing Recipes in a Recipe Service (4:07)
Using a Service for Cross-Component Communication (5:07)
Adding the Shopping List Service (5:04)
Using Services for Pushing Data from A to B (3:08)
Adding Ingredients to Recipes (3:41)
Passing Ingredients from Recipes to the Shopping List (via a Service) (7:03)
Changing Pages with Routing
Module Introduction (1:26)
Why do we need a Router? (1:15)
Setting up and Loading Routes (8:01)
Navigating with Router Links (5:18)
Understanding Navigation Paths (4:54)
Styling Active Router Links (5:01)
Navigating Programmatically (3:28)
Using Relative Paths in Programmatic Navigation (5:09)
Passing Parameters to Routes (3:10)
Fetching Route Parameters (4:01)
Fetching Route Parameters Reactively (7:25)
An Important Note about Route Observables (2:42)
Passing Query Parameters and Fragments (5:53)
Retrieving Query Parameters and Fragments (3:15)
Practicing and some Common Gotchas (6:07)
Setting up Child (Nested) Routes (4:28)
Using Query Parameters - Practice (5:36)
Configuring the Handling of Query Parameters (1:50)
Redirecting and Wildcard Routes (4:36)
Redirection Path Matching
Outsourcing the Route Configuration (4:40)
An Introduction to Guards (1:45)
Protecting Routes with canActivate (8:55)
Protecting Child (Nested) Routes with canActivateChild (2:51)
Using a Fake Auth Service (1:43)
Controlling Navigation with canDeactivate (12:28)
Passing Static Data to a Route (5:56)
Resolving Dynamic Data with the resolve Guard (9:53)
Understanding Location Strategies (4:43)
Wrap Up (0:51)
Course Project - Routing
Planning the General Structure (1:36)
Setting Up Routes (7:58)
Adding Navigation to the App (1:41)
Marking Active Routes (1:31)
Fixing Page Reload Issues (2:51)
Child Routes: Challenge (1:54)
Adding Child Routing Together (4:21)
Configuring Route Parameters (6:22)
Passing Dynamic Parameters to Links (3:01)
Styling Active Recipe Items (1:14)
Adding Editing Routes (3:44)
Retrieving Route Parameters (3:19)
Programmatic Navigation to the Edit Page (4:46)
One Note about Route Observables (0:52)
Project Cleanup
Understanding Observables
Module Introduction (4:25)
Analyzing Angular Observables (2:15)
Getting Closer to the Core of Observables (6:50)
Building a Custom Observable (4:46)
Errors & Completion (6:39)
Observables & You! (1:55)
Understanding Operators (8:39)
Subjects (8:17)
Wrap Up (1:15)
Useful Resources & Links
Course Project - Observables
Improving the Reactive Service with Observables (Subjects) (6:04)
Handling Forms in Angular Apps
Module Introduction (1:19)
Why do we Need Angular's Help? (2:21)
Template-Driven (TD) vs Reactive Approach (1:16)
An Example Form (1:32)
TD: Creating the Form and Registering the Controls (5:42)
TD: Submitting and Using the Form (6:15)
TD: Understanding Form State (2:29)
TD: Accessing the Form with @ViewChild (3:03)
TD: Adding Validation to check User Input (4:14)
Built-in Validators & Using HTML5 Validation
TD: Using the Form State (4:27)
TD: Outputting Validation Error Messages (2:23)
TD: Set Default Values with ngModel Property Binding (2:15)
TD: Using ngModel with Two-Way-Binding (2:48)
TD: Grouping Form Controls (3:30)
TD: Handling Radio Buttons (3:27)
TD: Setting and Patching Form Values (4:42)
TD: Using Form Data (4:44)
TD: Resetting Forms (1:47)
Assignment: Template-driven Forms (Problem) (1:15)
Assignment: Template-driven Forms (Solution) (12:17)
Introduction to the Reactive Approach (0:40)
Reactive: Setup (2:26)
Reactive: Creating a Form in Code (4:07)
Reactive: Syncing HTML and Form (3:58)
Reactive: Submitting the Form (2:15)
Reactive: Adding Validation (2:50)
Reactive: Getting Access to Controls (3:47)
Reactive: Grouping Controls (3:46)
Reactive: Arrays of Form Controls (FormArray) (7:31)
Reactive: Creating Custom Validators (6:11)
Reactive: Using Error Codes (3:20)
Reactive: Creating a Custom Async Validator (4:38)
Reactive: Reacting to Status or Value Changes (2:11)
Reactive: Setting and Patching Values (2:09)
Assignment: Reactive Forms (Problem) (1:04)
Assignment: Reactive Forms (Solution) (13:48)
Course Project - Forms
Introduction (0:59)
TD: Adding the Shopping List Form (3:42)
Adding Validation to the Form (2:21)
Allowing the Selection of Items in the List (4:24)
Loading the Shopping List Items into the Form (3:02)
Updating existing Items (3:15)
Resetting the Form (2:34)
Allowing the the User to Clear (Cancel) the Form (1:16)
Allowing the Deletion of Shopping List Items (2:52)
Creating the Template for the (Reactive) Recipe Edit Form (4:59)
Creating the Form For Editing Recipes (5:06)
Syncing HTML with the Form (3:52)
Adding Ingredient Controls to a Form Array (5:39)
Adding new Ingredient Controls (3:38)
Validating User Input (5:10)
Submitting the Recipe Edit Form (7:30)
Adding a Delete and Clear (Cancel) Functionality (4:47)
Redirecting the User (after Deleting a Recipe) (1:47)
Adding an Image Preview (1:48)
Providing the Recipe Service Correctly (1:58)
Deleting Ingredients and Some Finishing Touches (3:34)
Deleting All Items In A FormArray
Using Pipes to Transform Output
Introduction & Why Pipes are Useful (2:01)
Using Pipes (3:28)
Parametrizing Pipes (2:10)
Where to learn more about Pipes (1:56)
Chaining Multiple Pipes (2:20)
Creating a Custom Pipe (6:42)
Parametrizing a Custom Pipe (2:36)
Example: Creating a Filter Pipe (7:01)
Pure and Impure Pipes (or: How to "fix" the Filter Pipe) (4:46)
Understanding the "async" Pipe (4:03)
Assignment: Pipes (Problem) (1:13)
Assignment: Pipes (Solution) (5:10)
Making Http Requests
A New IDE (0:43)
Module Introduction (1:06)
How Does Angular Interact With Backends? (3:09)
The Anatomy of a Http Request (2:27)
Backend (Firebase) Setup (2:35)
Sending a POST Request (10:11)
GETting Data (2:56)
Using RxJS Operators to Transform Response Data (3:59)
Using Types with the HttpClient (5:07)
Outputting Posts (2:15)
Showing a Loading Indicator (2:03)
Using a Service for Http Requests (6:37)
Services & Components Working Together (3:28)
Sending a DELETE Request (3:27)
Handling Errors (6:38)
Using Subjects for Error Handling (2:39)
Using the catchError Operator (2:13)
Error Handling & UX (2:07)
Setting Headers (3:18)
Adding Query Params (4:01)
Observing Different Types of Responses (7:32)
Changing the Response Body Type (3:16)
Introducing Interceptors (7:24)
Manipulating Request Objects (2:32)
Response Interceptors (2:46)
Multiple Interceptors (4:52)
Wrap Up (1:57)
Useful Resources & Links
Course Project - Http
Module Introduction (0:55)
Backend (Firebase) Setup (2:03)
Setting Up the DataStorage Service (5:32)
Storing Recipes (6:39)
Fetching Recipes (5:38)
Transforming Response Data (4:17)
Resolving Data Before Loading (7:31)
Fixing a Bug with the Resolver (1:43)
Authentication & Route Protection in Angular
Module Introduction (0:52)
How Authentication Works (5:01)
Adding the Auth Page (6:44)
Switching Between Auth Modes (4:02)
Handling Form Input (3:44)
Preparing the Backend (3:15)
Preparing the Signup Request (8:24)
Sending the Signup Request (4:36)
Adding a Loading Spinner & Error Handling Logic (6:34)
Improving Error Handling (5:39)
Sending Login Requests (6:00)
Login Error Handling (4:28)
Creating & Storing the User Data (10:16)
Reflecting the Auth State in the UI (9:41)
Adding the Token to Outgoing Requests (10:15)
Attaching the Token with an Interceptor (8:48)
Adding Logout (3:18)
Adding Auto-Login (9:55)
Adding Auto-Logout (7:39)
Adding an Auth Guard (10:56)
Wrap Up (1:55)
Useful Resources & Links
Dynamic Components
Module Introduction (1:09)
Adding an Alert Modal Component (7:33)
Understanding the Different Approaches (2:28)
Using ngIf (3:05)
Preparing Programmatic Creation (8:27)
Creating a Component Programmatically (4:46)
Understanding entryComponents (5:06)
Data Binding & Event Binding (5:05)
Wrap Up (1:25)
Useful Resources & Links
Angular Modules & Optimizing Angular Apps
Module Introduction (0:41)
What are Modules? (2:26)
Analyzing the AppModule (6:24)
Getting Started with Feature Modules (8:59)
Splitting Modules Correctly (4:09)
Adding Routes to Feature Modules (4:35)
Component Declarations (1:58)
The ShoppingList Feature Module (4:27)
Understanding Shared Modules (8:10)
Understanding the Core Module (5:48)
Adding an Auth Feature Module (4:22)
Understanding Lazy Loading (2:52)
Implementing Lazy Loading (12:20)
More Lazy Loading (3:02)
Preloading Lazy-Loaded Code (3:39)
Modules & Services (5:46)
Loading Services Differently (8:24)
Ahead-of-Time Compilation (9:50)
Wrap Up (0:49)
Useful Resources & Links
Deploying an Angular App
Module Introduction (0:52)
Deployment Preparation & Steps (3:18)
Using Environment Variables (4:44)
Example: Deploying to Firebase Hosting (9:01)
Server-side Routing vs Client-side Routing
Standalone Components
Module Introduction (1:27)
Starting Setup & Why We Want Standalone Components (4:48)
Building a First Standalone Component (9:49)
Standalone Components Are Now Stable
Standalone Directives & Connecting Building Blocks (2:19)
Migrating Another Component (1:49)