Autoplay
Autocomplete
Previous Lesson
Complete and Continue
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)
A Standalone Root Component (4:20)
Services & Standalone Components (3:59)
Routing with Standalone Components (6:36)
Lazy Loading (8:04)
Summary (1:56)
Angular Signals
Module Introduction (1:08)
Signals: What & Why? (5:40)
Creating a New Signal (3:23)
Updating a Signal Value (2:34)
Reading & Outputting a Signal Value (2:11)
Signal Updating: set(), update() & mutate() (6:12)
Signals: What's To Come?
Signal Updating: set(), update() & mutate() (1:02)
Computed Values & Effects (3:48)
Module Summary (0:55)
Bonus: Working with NgRx in our Project
Module Introduction (0:57)
What Is NgRx? (2:09)
Understanding NgRx & Its Building Blocks (3:58)
Project Setup & Installing NgRx (5:12)
Adding a First Reducer & Store Setup (8:35)
An Alternative Way Of Creating Reducers (4:19)
Reading Data From The Store (9:36)
Introducing Actions & State Changing Reducers (7:49)
Dispatching Actions (3:41)
Attaching Data To Actions (4:20)
Handling Actions Without createReducer (6:01)
An Alternative Way Of Defining Actions (10:02)
Time To Practice: A Second Action (5:28)
Exploring Selectors (8:17)
Introducing Effects (2:39)
Installing the Effects Package (2:03)
Defining a First Effect (8:40)
The Old @Effect Decorator & Registering Effects (3:43)
Using Store Data In Effects (3:24)
Adding a Second Effect (9:58)
Summary (3:02)
About The Remaining Section
Recipe Project Starting Code
Getting Started with Reducers (6:44)
Adding Logic to the Reducer (5:47)
Understanding & Adding Actions (6:16)
Setting Up the NgRx Store (4:48)
Selecting State (8:51)
Dispatching Actions (7:09)
Multiple Actions (9:37)
Preparing Update & Delete Actions (3:08)
Updating & Deleting Ingredients (10:59)
Expanding the State (9:17)
Managing More State via NgRx (9:52)
Removing Redundant Component State Management (3:32)
First Summary & Clean Up (5:25)
One Root State (11:39)
Setting Up Auth Reducer & Actions (8:25)
Dispatching Auth Actions (5:53)
Auth Finished (For Now...) (6:43)
An Important Note on Actions (6:24)
Exploring NgRx Effects (3:38)
Defining the First Effect (5:19)
Effects & Error Handling (8:57)
Login via NgRx Effects (9:08)
Managing UI State in NgRx (7:30)
Finishing the Login Effect (7:11)
Preparing Other Auth Actions (4:09)
Adding Signup (6:17)
Further Auth Effects (6:13)
Adding Auto-Login with NgRx (8:16)
Adding Auto-Logout (6:31)
Finishing the Auth Effects (2:29)
Using the Store Devtools (6:20)
The Router Store (2:11)
Getting Started with NgRx for Recipes (11:03)
Fetching Recipe Detail Data (9:14)
Fetching Recipes & Using the Resolver (12:00)
Fixing the Auth Redirect (2:10)
Update, Delete and Add Recipes (15:11)
Storing Recipes via Effects (5:52)
Cleanup Work (1:58)
Wrap Up (2:12)
Alternative NgRx Syntax
Useful Resources & Links
Bonus: Angular Universal
Module Introduction (0:33)
Angular Universal - What & Why? (7:49)
Converting the App to a Universal App (3:12)
Analyzing & Running Server-side Code (5:22)
A Closer Look At The Server-side Code (4:10)
Integrating a REST API (3:07)
Some Notes About Deploying Angular Universal Apps (4:30)
Angular Animations
Module Introduction (1:03)
Setting Up A Starting Project (0:52)
Animations Triggers and State (7:11)
Switching between States (2:04)
Transitions (1:54)
Advanced Transitions (5:21)
Transition Phases (3:57)
The "void" State (6:11)
Using Keyframes for Animations (5:32)
Grouping Transitions (2:11)
Using Animation Callbacks (2:38)
Adding Offline Capabilities with Service Workers
Module Introduction (2:09)
Adding Service Workers (12:41)
Caching Assets for Offline Use (5:28)
Caching Dynamic Assets & URLs (7:02)
Useful Resources & Links
A Basic Introduction to Unit Testing in Angular Apps
Introduction (1:18)
Why Unit Tests? (2:12)
Analyzing the Testing Setup (as created by the CLI) (8:01)
Running Tests (with the CLI) (1:59)
Adding a Component and some fitting Tests (6:14)
Testing Dependencies: Components and Services (6:55)
Simulating Async Tasks (9:41)
Using "fakeAsync" and "tick" (2:14)
Isolated vs Non-Isolated Tests (6:10)
Useful Resources & Links
Angular as a Platform & Closer Look at the CLI
Module Introduction (1:44)
A Closer Look at "ng new" (5:18)
IDE & Project Setup (2:31)
Understanding the Config Files (9:01)
Important CLI Commands (5:25)
The "angular.json" File - A Closer Look (11:18)
Angular Schematics - An Introduction (1:41)
The "ng add" Command (4:31)
Using Custom "ng generate" Schematics (3:05)
Smooth Updating of Projects with "ng update" (2:14)
Simplified Deployment with "ng deploy" (5:46)
Understanding "Differential Loading" (5:10)
Managing Multiple Projects in One Folder (4:35)
Angular Libraries - An Introduction (2:51)
Wrap Up (1:27)
Bonus: TypeScript Introduction
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 Roundup
Roundup (1:33)
Reading & Outputting a Signal Value
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock