Angular - The Complete Guide (2024 Edition)
Master Angular from basics to advanced with hands-on projects and modern features
0.0 (0 reviews)
0 students enrolled
55 hours
Instructor: Maximilian Schwarzmüller
All Levels Level
Programming
704 downloadable files
Course Description
This comprehensive Angular course covers everything from fundamentals to advanced topics including components, directives, services, routing, HTTP, forms, state management, and more with latest Angular features.
What You'll Learn
- Professional skills development
- Hands-on projects
- Industry best practices
- Downloadable resources
- Lifetime access
- Community support
Download Course Files
-
Welcome To The Course
Introduction to the Angular course• 01:31 min • video -
What Exactly Is Angular
Understanding what Angular is• 01:49 min • videoPurchase required -
Why Would You Use Angular
Reasons to use Angular framework• 06:41 min • videoPurchase required -
Angular's Evolution Stability
Angular evolution and stability• 04:43 min • videoPurchase required -
Creating A New Angular Project
How to create new Angular project• 07:02 min • videoPurchase required -
Setting Up An Angular Development Environment
Setup Angular development environment• 04:48 min • videoPurchase required -
About This Course
Course structure and content overview• 03:18 min • videoPurchase required
-
Module Introduction
Introduction to Angular essentials module• 01:19 min • videoPurchase required -
A New Starting Project Analyzing The Project Structure
Analyzing Angular project structure• 06:27 min • videoPurchase required -
Understanding Components How Content Ends Up On The Screen
How Angular components render content• 06:17 min • videoPurchase required -
Creating a First Custom Component
Creating first custom Angular component• 05:14 min • videoPurchase required -
Configuring the Custom Component
Configuring custom component properties• 05:20 min • videoPurchase required -
Using the Custom Component
Using custom components in templates• 06:08 min • videoPurchase required -
Styling the Header Component Adding An Image
Styling components and adding images• 06:20 min • videoPurchase required -
Managing Creating Components with the Angular CLI
Using Angular CLI for component management• 04:28 min • videoPurchase required -
Styling Using Our Next Custom Component
Styling and using custom components• 05:08 min • videoPurchase required -
Preparing User Data To Output Dynamic Content
Preparing data for dynamic content output• 02:07 min • videoPurchase required -
Storing Data in a Component Class
Storing data in component classes• 03:54 min • videoPurchase required -
Outputting Dynamic Content with String Interpolation
Using string interpolation for dynamic content• 02:30 min • videoPurchase required -
Property Binding Outputting Computed Values
Property binding for computed values• 04:37 min • videoPurchase required -
Using Getters For Computed Values
Using getters for computed property values• 03:29 min • videoPurchase required -
Listening to Events with Event Binding
Event binding for user interactions• 04:04 min • videoPurchase required -
Managing State Changing Data
Managing component state and data changes• 03:06 min • videoPurchase required -
A Look Behind The Scenes Of Angular's Change Detection Mechanism
Understanding Angular change detection• 02:06 min • videoPurchase required -
Introducing Signals
Introduction to Angular Signals• 12:52 min • videoPurchase required -
We Need More Flexible Components
Creating flexible reusable components• 03:40 min • videoPurchase required -
Defining Component Inputs
Defining component input properties• 08:17 min • videoPurchase required -
Required Optional Inputs
Required vs optional component inputs• 02:56 min • videoPurchase required -
Using Signal Inputs
Using signal-based component inputs• 13:59 min • videoPurchase required -
We Need Custom Events
Creating custom component events• 01:47 min • videoPurchase required -
Working with Outputs Emitting Data
Component outputs and data emission• 06:58 min • videoPurchase required -
Using the output Function
Using output() function for events• 06:12 min • videoPurchase required -
Adding Extra Type Information To EventEmitter
Type information for EventEmitter• 01:57 min • videoPurchase required -
Exercise Create a Configurable Component
Practice creating configurable components• 08:47 min • videoPurchase required -
TypeScript Working With Potentially Undefined Values Union Types
TypeScript undefined values and union types• 08:06 min • videoPurchase required -
Accepting Objects As Inputs Adding Appropriate Typings
Accepting objects as component inputs• 04:46 min • videoPurchase required -
TypeScript Type Aliases Interfaces
TypeScript type aliases and interfaces• 03:10 min • videoPurchase required -
Outputting List Content
Outputting list content in templates• 05:33 min • videoPurchase required -
Outputting Conditional Content
Conditional content rendering• 04:26 min • videoPurchase required -
Legacy Angular Using ngFor ngIf
Legacy Angular directives ngFor and ngIf• 05:21 min • videoPurchase required -
Adding More Components to the Demo App
Adding components to demo application• 06:14 min • videoPurchase required -
Outputting User-specific Tasks
Outputting user-specific task data• 06:30 min • videoPurchase required -
Outputting Task Data in the Task Component
Outputting task data in components• videoPurchase required -
Storing Data Models in Separate Files
Separating data models into files• 03:44 min • videoPurchase required -
Dynamic CSS Styling with Class Bindings
Dynamic CSS styling with class bindings• 04:36 min • videoPurchase required -
More Component Communication Deleting Tasks
Component communication for task deletion• 05:25 min • videoPurchase required -
Creating Conditionally Rendering Another Component
Conditional component rendering• 05:24 min • videoPurchase required -
Managing The New Task Dialog
Managing dialog components• videoPurchase required -
Using Directives Two Way Binding
Directives and two-way binding• 10:46 min • videoPurchase required -
Signals Two Way Binding
Two-way binding with signals• 02:19 min • videoPurchase required -
Handling Form Submission
Handling form submissions in Angular• 03:20 min • videoPurchase required -
Using the Submitted Data
Using submitted form data• 07:20 min • videoPurchase required -
Content Projection with ng-content
Content projection using ng-content• 06:47 min • videoPurchase required -
Transforming Template Data with Pipes
Transforming data with pipes• 03:16 min • videoPurchase required -
Getting Started with Services
Introduction to Angular services• 06:15 min • videoPurchase required -
Getting Started with Dependency Injection
Introduction to dependency injection• 08:02 min • videoPurchase required -
More Service Usage Alternative Dependency Injection Mechanism
Advanced service usage and DI• 05:17 min • videoPurchase required -
Time to Practice Services
Practice exercises for services• videoPurchase required -
Using localStorage for Data Storage
Using localStorage for data persistence• 05:40 min • videoPurchase required -
Module Summary
Summary of Angular essentials module• 08:45 min • videoPurchase required
-
Module Introduction
Introduction to Angular modules• 02:16 min • videoPurchase required -
A First Introduction To Angular Modules NgModule
First look at Angular modules• 03:05 min • videoPurchase required -
Creating a First Empty Module
Creating first empty module• 02:55 min • videoPurchase required -
Bootstrapping Apps with Angular Modules
Bootstrapping apps with modules• videoPurchase required -
Declaring Using Components
Declaring and using components in modules• 04:45 min • videoPurchase required -
A First Summary
First summary of modules• 02:14 min • videoPurchase required -
Migrating All Components To Use Modules
Migrating components to use modules• 06:50 min • videoPurchase required -
Creating Using Shared Modules
Creating and using shared modules• 04:12 min • videoPurchase required -
Creating More Complex Module-based App Structures
Complex module-based app structures• 07:22 min • videoPurchase required
-
Module Introduction Starting Project
Introduction to practice module• 05:19 min • videoPurchase required -
Adding a Header Component With An Image
Adding header component with image• 05:10 min • videoPurchase required -
Adding a User Input Component
Adding user input component• 06:42 min • videoPurchase required -
Handling Form Submission
Handling form submissions practice• 02:29 min • videoPurchase required -
Extracting Values with Two Way Binding
Extracting values with two-way binding• 08:10 min • videoPurchase required -
Calculating the Annual Investment Data
Calculating annual investment data• 05:04 min • videoPurchase required -
Cross Component Communication with Outputs
Cross-component communication with outputs• 09:25 min • videoPurchase required -
Creating Using a Data Model
Creating and using data models• 02:58 min • videoPurchase required -
Passing Data from Parent to Child with Inputs
Passing data parent to child with inputs• 10:09 min • videoPurchase required -
Outputting Data in a Table
Outputting data in table format• 04:57 min • videoPurchase required -
Formatting Output with a Pipe
Formatting output with pipes• 01:39 min • videoPurchase required -
Using Signals Resetting The Form After Submission
Using signals and form reset• 09:55 min • videoPurchase required -
Using a Service for Cross Component Communication
Using services for cross-component communication• 09:35 min • videoPurchase required -
Using Signals in Services
Using signals within services• 04:11 min • videoPurchase required -
Migrating to Angular Modules
Migrating to Angular modules structure• 08:08 min • videoPurchase required -
Module Summary
Summary of practice module• 01:13 min • videoPurchase required
-
Module Introduction
Introduction to debugging module• 01:41 min • videoPurchase required -
Understanding Error Messages Fixing Errors
Understanding and fixing error messages• 03:46 min • videoPurchase required -
Debugging Logical Errors with the Browser DevTools Breakpoints
Debugging with browser devtools• 06:19 min • videoPurchase required -
Exploring the Angular DevTools
Exploring Angular developer tools• 03:50 min • videoPurchase required
-
Module Introduction
Introduction to components deep dive• 02:00 min • videoPurchase required -
Starting Project An Opportunity For Smaller Components
Project setup for component study• 02:34 min • videoPurchase required -
Starting Project An Opportunity For Smaller Components
Project setup for component study• 02:34 min • videoPurchase required -
When How To Split Up Components
When and how to split components• 04:25 min • videoPurchase required -
Splitting A Component Into Multiple Components
Splitting components into multiple• videoPurchase required -
Creating Reusable Components
Creating reusable components• 03:58 min • videoPurchase required -
Component Inputs Repetition
Review of component inputs• 05:22 min • videoPurchase required -
Property Binding Repetition
Review of property binding• 08:31 min • videoPurchase required -
Using Content Projection ng-content
Advanced content projection• videoPurchase required -
Adding Forms to Components
Adding forms to components• 06:01 min • videoPurchase required -
A Possible But Not Ideal Way Of Extending Built-in Elements
Extending built-in elements• 04:27 min • videoPurchase required -
Extending Built-in Elements with Custom Components via Attribute Selectors
Extending elements with attribute selectors• videoPurchase required -
Supporting Content Projection with Multiple Slots
Multi-slot content projection• 06:32 min • videoPurchase required -
Exploring Advanced Content Projection
Advanced content projection techniques• videoPurchase required -
Defining Content Projection Fallbacks
Content projection fallbacks• 02:09 min • videoPurchase required -
Multi-Element Custom Components Content Projection
Multi-element components with projection• 07:28 min • videoPurchase required -
Scoping CSS Styles to Components
CSS scoping in components• 05:03 min • videoPurchase required -
Understanding Configuring View Encapsulation
View encapsulation configuration• videoPurchase required -
Making Sense of Component Host Elements
Understanding component host elements• 02:52 min • videoPurchase required -
Using Host Elements Like Regular Elements
Using host elements• 04:30 min • videoPurchase required -
Interacting With Host Elements From Inside Components
Interacting with host elements internally• 02:05 min • videoPurchase required -
When Not To Rely On Host Elements
When not to rely on host elements• videoPurchase required -
Interacting with Host Elements via HostListener HostBinding
HostListener and HostBinding• videoPurchase required -
Accessing Host Elements Programmatically
Programmatic host element access• 04:03 min • videoPurchase required -
Class Bindings Repetition
Review of class bindings• 04:24 min • videoPurchase required -
There's More Than One Way Of Binding CSS Classes Dynamically
Multiple ways for dynamic CSS binding• videoPurchase required -
A Closer Look At Dynamic Inline Style Binding
Dynamic inline style binding• 03:30 min • videoPurchase required -
Manipulating State Using Literal Values
State manipulation with literal values• 04:42 min • videoPurchase required -
Introducing the Component Lifecycle ngOnInit
Component lifecycle and ngOnInit• 04:02 min • videoPurchase required -
Implementing Lifecycle Interfaces
Implementing lifecycle interfaces• 03:11 min • videoPurchase required -
Component Lifecycle A Deep Dive
Deep dive into component lifecycle• 15:16 min • videoPurchase required -
Component Cleanup with ngOnDestroy
Component cleanup with ngOnDestroy• 04:07 min • videoPurchase required -
Component Cleanup with DestroyRef
Component cleanup with DestroyRef• 02:47 min • videoPurchase required -
Handling Form Submissions Repetition
Review of form submissions• 02:46 min • videoPurchase required -
Working with Template Variables
Working with template variables• 07:13 min • videoPurchase required -
Extracting Input Values via Template Variables
Extracting input values with template variables• 01:54 min • videoPurchase required -
Template Variables Component Instances
Template variables and component instances• 02:35 min • videoPurchase required -
Getting Access to Template Elements via ViewChild
Accessing template elements with ViewChild• 09:27 min • videoPurchase required -
Using The viewChild Signal Function
Using viewChild signal function• 06:22 min • videoPurchase required -
ViewChild vs ContentChild
ViewChild vs ContentChild comparison• videoPurchase required -
A Closer Look at Decorator-based Queries Lifecycle Hooks
Decorator-based queries and lifecycle• videoPurchase required -
The afterRender and afterNextRender Lifecycle Functions
afterRender and afterNextRender lifecycle• 03:08 min • videoPurchase required -
Making Sense of Signal Effects
Understanding signal effects• 05:28 min • videoPurchase required -
TypeScript Type Models Repetition
Review of TypeScript type models• 03:31 min • videoPurchase required -
Component Outputs Repetition
Review of component outputs• 04:23 min • videoPurchase required -
A Closer Look At Template For Loops
Deep dive into template for loops• 05:53 min • videoPurchase required -
Revisiting Inputs Signals
Revisiting inputs and signals• 05:00 min • videoPurchase required -
Updating Signal Values
Updating signal values• 04:50 min • videoPurchase required -
Cross Component Communication State Management
Cross-component communication state management• 06:13 min • videoPurchase required -
Configuring Component Inputs Outputs
Configuring component inputs and outputs• 04:06 min • videoPurchase required -
Two Way Binding Repetition
Review of two-way binding• 03:55 min • videoPurchase required -
Setting Up Custom Two Way Binding
Setting up custom two-way binding• 08:54 min • videoPurchase required -
An Easier Way of Setting Up Custom Two Way Binding
Easier custom two-way binding setup• 03:53 min • videoPurchase required
-
Module Introduction
Introduction to the Directives Deep Dive module• 01:03 min • videoPurchase required -
Understanding Directives
Learn what directives are and how they work in Angular• 02:57 min • videoPurchase required -
The Starting Project
Setting up the starting project for directives• 01:04 min • videoPurchase required -
Analyzing a Built-in Attribute Directive - ngModel
Deep dive into the ngModel attribute directive• 05:41 min • videoPurchase required -
Analyzing a Built-in Structural Directive - ngIf
Deep dive into the ngIf structural directive• 06:29 min • videoPurchase required -
Getting Started with Custom Directives
Learn how to create and use custom directives• 05:14 min • videoPurchase required -
Using Attribute Directives To Change Element Behavior
Create attribute directives to modify element behavior• 04:47 min • videoPurchase required -
Working with Inputs in Custom Directives
Pass data to directives using inputs• 08:51 min • videoPurchase required -
Directives & Dependency Injection
Use dependency injection within directives• 04:09 min • videoPurchase required -
Building Another Directive
Create another custom directive example• 07:56 min • videoPurchase required -
Building a Custom Structural Directive
Create your own structural directives• 08:22 min • videoPurchase required -
Structural Directives & Syntactic Sugar
Understand the syntax sugar behind structural directives• 03:07 min • videoPurchase required -
Host Directives & Composition
Learn about host directives and composition patterns• 07:59 min • videoPurchase required
-
Module Introduction
Introduction to the Pipes Deep Dive module• 00:35 min • videoPurchase required -
Making Sense of Pipes
Understanding what pipes are and why they're useful• 05:57 min • videoPurchase required -
Using Built-in Pipes
Learn how to use Angular's built-in pipes• 06:32 min • videoPurchase required -
More Built-in Pipes Examples
Additional examples of built-in pipes• 04:18 min • videoPurchase required -
Building a First Custom Pipe
Create your first custom pipe• 05:57 min • videoPurchase required -
Using Custom Pipes to Perform Custom Transformations
Implement custom transformations with pipes• 03:49 min • videoPurchase required -
Accepting Parameters in Custom Pipes
Make pipes configurable with parameters• 05:56 min • videoPurchase required -
Chaining Pipes & Being Aware of Limitations
Chain multiple pipes together and understand limitations• 04:44 min • videoPurchase required -
Building a Pipe That Sorts Items
Create a pipe that sorts arrays• 06:45 min • videoPurchase required -
Understanding How Pipes Are Executed
Learn about pipe execution and performance• 04:14 min • videoPurchase required -
Pure & Impure Pipes
Understand the difference between pure and impure pipes• 01:44 min • videoPurchase required -
Pipe Limitations & When Not To Use Them
Learn when to avoid using pipes• 02:53 min • videoPurchase required
-
Module Introduction
Introduction to Services and DI Deep Dive module• 00:58 min • videoPurchase required -
The Starting Project & The Need For A Centralized Service
Project setup and understanding why services are needed• 03:14 min • videoPurchase required -
Creating a Service
Learn how to create Angular services• 07:27 min • videoPurchase required -
How NOT To Provide A Service
Common mistakes when providing services• 02:23 min • videoPurchase required -
Using Angular's Dependency Injection Mechanism
Understanding Angular's DI system• 05:01 min • videoPurchase required -
Using The Alternative Dependency Injection Syntax
Learn alternative DI syntax patterns• 05:27 min • videoPurchase required -
Outsourcing & Reusing Logic with Services
Share logic across components using services• 10:55 min • videoPurchase required -
Angular Has Multiple Injectors
Understand the injector hierarchy in Angular• 06:15 min • videoPurchase required -
There Are Multiple Ways Of Providing a Service
Different methods to provide services in Angular• 04:16 min • videoPurchase required -
Providing Services via the Element Injector
Learn about element-level service providers• 06:20 min • videoPurchase required -
Understanding the Element Injector's Behavior
Deep dive into element injector behavior• 05:08 min • videoPurchase required -
Injecting Services Into Services
Learn how to inject services into other services• 05:26 min • videoPurchase required -
Analyzing Dependency Injection with the Angular DevTools
Use Angular DevTools to analyze DI• 04:12 min • videoPurchase required -
Using Custom DI Tokens & Providers
Create custom DI tokens and providers• 08:27 min • videoPurchase required -
Preparing A Non-Class Value For Injection
Inject non-class values using DI• 06:47 min • videoPurchase required -
Injecting Other Values (NOT Services)
Learn to inject values that aren't services• 10:25 min • videoPurchase required -
Angular Modules (NgModule) & Dependency Injection
Understand how modules relate to DI• 05:24 min • videoPurchase required -
Working with Services Without Using Signals
Traditional service patterns without signals• 04:36 min • videoPurchase required
-
Module Introduction
Introduction to the change detection module• videoPurchase required -
Analyzing the Starting Project
Analysis of the starting project for change detection module• videoPurchase required -
Understanding How Angular Performs Change Detection
How Angular's change detection mechanism works• videoPurchase required -
Change Detection During Development - ExpressionChangedAfterChecked Errors
Understanding and fixing ExpressionChangedAfterChecked errors• 02:45 min • videoPurchase required -
Writing Efficient Template Bindings
How to write efficient template bindings for better performance• videoPurchase required -
Avoiding Zone Pollution
How to avoid zone pollution for better change detection performance• 05:18 min • videoPurchase required -
Using the OnPush Strategy
Introduction to the OnPush change detection strategy• 03:21 min • videoPurchase required -
Understanding the OnPush Strategy
Deep dive into how the OnPush strategy works• 08:37 min • videoPurchase required -
Working with OnPush and Signals
How to use Signals with the OnPush change detection strategy• 02:13 min • videoPurchase required -
Using Signals for Sharing Data Across Components (with OnPush)
How to share data between components using Signals with OnPush strategy• videoPurchase required -
The Problem With OnPush, Cross Component Data and Not Using Signals
Challenges with OnPush strategy when not using Signals for cross-component data• 03:12 min • videoPurchase required -
Triggering Change Detection Manually and Using RxJS Subjects
How to manually trigger change detection and use RxJS Subjects• 11:01 min • videoPurchase required -
Introducing The async Pipe
Introduction to the async pipe for handling observables in templates• 04:32 min • videoPurchase required -
Going Zoneless
Understanding and implementing zoneless Angular applications• 12:58 min • videoPurchase required
-
Module Introduction
Introduction to the RxJS and Observables module• 00:52 min • videoPurchase required -
What Are Observables and What Is RxJS?
Introduction to Observables and RxJS library• 01:07 min • videoPurchase required -
Creating and Using an Observable
How to create and use Observables in Angular• 09:17 min • videoPurchase required -
Working with RxJS Operators
Using RxJS operators to transform and manipulate observable streams• 05:34 min • videoPurchase required -
Working with Signals
How to work with Angular Signals in reactive programming• 05:12 min • videoPurchase required -
Signals vs Observables
Comparison between Signals and Observables in Angular• 06:00 min • videoPurchase required -
Converting Signals To Observables
How to convert Signals to Observables for interoperability• videoPurchase required -
Converting Observables To Signals
How to convert Observables to Signals• 04:53 min • videoPurchase required -
Deep Dive - Creating and Using A Custom Observable From Scratch
Creating and using custom Observables from scratch• 12:24 min • videoPurchase required -
Module Summary
Summary of the RxJS and Observables module• 02:38 min • videoPurchase required
-
Module Introduction
Introduction to the HTTP module• 01:28 min • videoPurchase required -
The Starting Projects - Frontend and Backend
Overview of the frontend and backend starting projects• videoPurchase required -
How To Connect Angular Apps To A Backend
How to connect Angular applications to backend services• videoPurchase required -
Getting Started with Angular's Http Client
Introduction to Angular's HttpClient• videoPurchase required -
Sending a GET Request To Fetch Data
How to send GET requests to fetch data from backend• 07:53 min • videoPurchase required -
Configuring Http Requests
How to configure HTTP requests with headers and options• 03:39 min • videoPurchase required -
Transforming Using Response Data
How to transform and use response data from HTTP requests• 02:51 min • videoPurchase required -
Showing a Loading Fallback
Implementing loading indicators for HTTP requests• videoPurchase required -
Handling HTTP Errors
How to handle HTTP errors in Angular applications• 10:45 min • videoPurchase required -
Sending Data To A Backend
How to send data to backend using POST requests• 07:09 min • videoPurchase required -
More Data Fetching and Some Code Duplication
Advanced data fetching techniques and addressing code duplication• 04:34 min • videoPurchase required -
Outsourcing HTTP Request Logic Into A Service
Moving HTTP request logic into services for better organization• 08:57 min • videoPurchase required -
Managing HTTP-loaded Data via a Service
Managing data loaded via HTTP requests through services• videoPurchase required -
Implementing Optimistic Updating
Implementing optimistic UI updates for better user experience• 02:41 min • videoPurchase required -
Potential Problems Introduced by Optimistic Updating
Understanding and addressing problems with optimistic updating• videoPurchase required -
Improved Optimistic Updating
Improved techniques for optimistic updating• 05:09 min • videoPurchase required -
Implementing App-wide Error Management
Implementing application-wide error management for HTTP requests• 07:06 min • videoPurchase required -
Practice - Sending DELETE Requests
Practice exercise for sending DELETE requests• 08:24 min • videoPurchase required -
Introducing HTTP Interceptors
Introduction to HTTP interceptors for request/response manipulation• 06:57 min • videoPurchase required -
Introducing HTTP Response Interceptors
Working with HTTP response interceptors• 03:02 min • videoPurchase required
-
Module Introduction
Introduction to the forms module• 02:27 min • videoPurchase required -
Template-driven vs Reactive Forms
Comparison between template-driven and reactive forms approaches• videoPurchase required -
Template-driven - Registering Form Controls
Registering form controls in template-driven forms• videoPurchase required -
Getting Access to the Angular-managed Form
How to access the Angular-managed form object• videoPurchase required -
Extracting User Input Values
Extracting user input values from forms• videoPurchase required -
Validating Input with Form Validation Directives
Validating form inputs using validation directives• 06:09 min • videoPurchase required -
Using the Form Validation Status To Provide User Feedback
Using form validation status to provide user feedback• 07:33 min • videoPurchase required -
Adding Validation Styles
Adding CSS styles for form validation states• videoPurchase required -
Interacting With The Underlying Form Object In The Component
Interacting with the underlying form object in the component class• 13:10 min • videoPurchase required -
Updating Form Values Programmatically
Updating form values programmatically in the component• 05:29 min • videoPurchase required -
Reactive Forms - Getting Started
Getting started with reactive forms approach• videoPurchase required -
Syncing Reactive Form Definition and Template
Synchronizing reactive form definition with the template• 03:36 min • videoPurchase required -
Handling Form Submission (Reactive Forms)
Handling form submission in reactive forms• 03:15 min • videoPurchase required -
Adding Validators To Reactive Forms
Adding validators to reactive forms• 06:35 min • videoPurchase required -
Building Custom Validators
Creating custom validators for forms• videoPurchase required -
Creating and Using Async Validators
Creating and using asynchronous validators• videoPurchase required -
Interacting with the Form Programmatically
Interacting with reactive forms programmatically• 08:38 min • videoPurchase required -
Exercise - Problem
Forms exercise problem statement• 02:18 min • videoPurchase required -
Exercise - Solution
Forms exercise solution• videoPurchase required -
Connecting and Registering Inputs For A Complex Form
Connecting and registering inputs for complex forms• 08:58 min • videoPurchase required -
Working with Nested Form Groups
Working with nested form groups in reactive forms• videoPurchase required -
Working with Form Arrays
Working with form arrays for dynamic form fields• videoPurchase required -
Practice - Adding More Validation
Practice exercise for adding more form validation• videoPurchase required -
Creating Multi-Input Validators and Form Group Validators
Creating validators that work with multiple inputs and form groups• 07:50 min • videoPurchase required -
Module Summary
Summary of the forms module• 01:30 min • videoPurchase required
-
Module Introduction
Introduction to the routing module• videoPurchase required -
What Is Routing?
Introduction to routing in Angular applications• videoPurchase required -
Enabling Routing and Adding a First Route
Enabling routing and adding the first route in Angular• videoPurchase required -
Rendering Routes
How to render routes in Angular applications• 03:34 min • videoPurchase required -
Registering Multiple Routes
Registering multiple routes in Angular routing• videoPurchase required -
Adding Links The Right Way
Adding navigation links the Angular way• 05:50 min • videoPurchase required -
Styling Active Navigation Links
Styling active navigation links in Angular routing• videoPurchase required -
Setting Up and Navigating To Dynamic Routes
Setting up and navigating to dynamic routes with parameters• 07:23 min • videoPurchase required -
Extracting Dynamic Route Parameters via Inputs
Extracting dynamic route parameters using Inputs• videoPurchase required -
Extracting Dynamic Route Parameters via Observables
Extracting dynamic route parameters using Observables• videoPurchase required -
Working with Nested Routes
Working with nested routes in Angular• 05:30 min • videoPurchase required -
Route Links and Relative Links
Working with route links and relative links• videoPurchase required -
Accessing Parent Route Data From Inside Nested Routes
Accessing parent route data from inside nested routes• videoPurchase required -
Loading Data Based On Route Parameters In Child Routes
Loading data based on route parameters in child routes• videoPurchase required -
Link Shortcuts and Programmatic Navigation
Using link shortcuts and programmatic navigation• 06:36 min • videoPurchase required -
Adding A Not Found Route
Adding a 404 Not Found route• 01:46 min • videoPurchase required -
Redirecting Users
Redirecting users between routes• videoPurchase required -
Splitting Route Definitions Across Multiple Files
Splitting route definitions across multiple files for better organization• 02:50 min • videoPurchase required -
Activated Route vs Activated Route Snapshot
Difference between ActivatedRoute and ActivatedRoute snapshot• 03:38 min • videoPurchase required -
Setting Query Parameters
Setting query parameters in routes• 05:35 min • videoPurchase required -
Extracting Query Parameters via Inputs
Extracting query parameters using Inputs• videoPurchase required -
Extracting Query Parameters via Observables
Extracting query parameters using Observables• 03:22 min • videoPurchase required -
Using Query Parameters For Data Manipulation
Using query parameters for data manipulation• 03:37 min • videoPurchase required -
Adding Static Data To Routes
Adding static data to routes• 05:06 min • videoPurchase required -
Resolving Route-related Dynamic Data
Resolving dynamic data before route activation• 11:22 min • videoPurchase required -
Accessing Route Data In Components
Accessing route data in components• videoPurchase required -
Controlling Route Resolver Execution
Controlling when route resolvers execute• videoPurchase required -
Setting and Resolving Titles
Setting and resolving page titles in routes• videoPurchase required -
Introducing Route Guards
Introduction to route guards for route protection• 09:18 min • videoPurchase required -
Making Sense of The CanDeactivate Guard
Understanding and implementing CanDeactivate guard• 04:56 min • videoPurchase required -
Improving The CanDeactivate Logic
Improving CanDeactivate guard logic• 02:59 min • videoPurchase required -
Reloading Pages via the Angular Router and Configuring Programmatic Navigation
Reloading pages and configuring programmatic navigation• 05:46 min • videoPurchase required
-
Module Introduction
Introduction to code splitting and deferrable views module• videoPurchase required -
What Is Lazy Loading and Code Splitting?
Introduction to lazy loading and code splitting concepts• 01:36 min • videoPurchase required -
Introducing Route-based Lazy Loading
Introduction to route-based lazy loading• 02:49 min • videoPurchase required -
Implementing Route-based Lazy Loading
Implementing route-based lazy loading in Angular• 08:14 min • videoPurchase required -
Lazy Loading Entire Route Groups
Lazy loading entire groups of routes• videoPurchase required -
Using Lazy Loading and Routing to Lazy-load Services
Lazy loading services through routing• 03:57 min • videoPurchase required -
Introducing Deferrable Views
Introduction to deferrable views in Angular• 03:09 min • videoPurchase required -
Defer Loading Until Viewport Visibility
Defer loading until elements are visible in viewport• 03:47 min • videoPurchase required -
Deferrable Views - Using Other Triggers
Using different triggers for deferrable views• videoPurchase required -
Prefetching Lazy-loaded Code
Prefetching lazy-loaded code for better performance• 01:59 min • videoPurchase required -
Deferrable Views - Summary
Summary of deferrable views• videoPurchase required
-
Module Introduction
Introduction to the deployment module• 01:08 min • videoPurchase required -
Preparing a Project For Deployment - Building It For Production
Preparing an Angular project for production deployment• videoPurchase required -
Building SPAs - Pros and Cons
Pros and cons of building Single Page Applications• 03:42 min • videoPurchase required -
SPAs - Deployment Example
Deployment example for Single Page Applications• 07:54 min • videoPurchase required -
Using ng-add and ng-deploy - Angular's Built-in Deployment Support
Using Angular CLI commands for deployment• videoPurchase required -
Server-side Rendering (SSR) - Introduction
Introduction to Server-Side Rendering in Angular• videoPurchase required -
Setting Up SSR For An Angular App
Setting up Server-Side Rendering for an Angular application• videoPurchase required -
Building and Serving an SSR App
Building and serving a Server-Side Rendered application• videoPurchase required -
Authoring SSR-ready Code (Beware of Pitfalls)
Writing code that works with Server-Side Rendering• videoPurchase required -
SSR and Client-Server Mismatches
Handling mismatches between client and server rendering• videoPurchase required -
Static Site Generation (SSG) - Introduction
Introduction to Static Site Generation in Angular• videoPurchase required -
Configuring and Using SSG
Configuring and using Static Site Generation• videoPurchase required -
Deployment Methods - A Summary
Summary of different deployment methods• 00:54 min • videoPurchase required
-
Course Roundup
Summary of the entire Angular course• 01:48 min • videoPurchase required -
About The Rest Of This Course
Information about the remaining parts of the course• 02:10 min • videoPurchase required
-
Module Introduction
Introduction to Angular 16+ basics module• 00:56 min • videoPurchase required -
How an Angular App gets Loaded and Started
Understanding how Angular applications bootstrap and load• 07:11 min • videoPurchase required -
Components are Important
Understanding the importance of components in Angular• videoPurchase required -
Creating a New Component
Creating a new component in Angular• 06:51 min • videoPurchase required -
Understanding the Role of AppModule and Component Declaration
Understanding AppModule and component declaration• 05:15 min • videoPurchase required -
Using Custom Components
Using custom components in Angular• 01:12 min • videoPurchase required -
Creating Components with the CLI and Nesting Components
Creating components with CLI and nesting components• 03:51 min • videoPurchase required -
Working with Component Templates
Working with component templates• videoPurchase required -
Working with Component Styles
Working with component styles• videoPurchase required -
Fully Understanding the Component Selector
Understanding component selectors in depth• videoPurchase required -
Optional - Assignment Solution
Optional solution for the components assignment• videoPurchase required -
What is Databinding?
Introduction to data binding in Angular• videoPurchase required -
String Interpolation
Using string interpolation for data binding• videoPurchase required -
Property Binding
Using property binding in Angular• 06:34 min • videoPurchase required -
Property Binding vs String Interpolation
Comparison between property binding and string interpolation• videoPurchase required -
Event Binding
Using event binding in Angular• videoPurchase required -
Passing and Using Data with Event Binding
Passing and using data with event binding• videoPurchase required -
Two-Way Databinding
Using two-way data binding in Angular• videoPurchase required -
Combining all Forms of Databinding
Combining all forms of data binding in Angular• videoPurchase required -
Optional Assignment Solution
Solution for the optional assignment• 00:00 min • videoPurchase required -
Understanding Directives
Introduction to Angular directives• 02:17 min • videoPurchase required -
Using ngIf to Output Data Conditionally
How to use ngIf directive for conditional rendering• 00:00 min • videoPurchase required -
Enhancing ngIf with an Else Condition
Using else condition with ngIf directive• 00:00 min • videoPurchase required -
Styling Elements Dynamically with ngStyle
Dynamic styling using ngStyle directive• 00:00 min • videoPurchase required -
Applying CSS Classes Dynamically with ngClass
Dynamic CSS class application with ngClass• 00:00 min • videoPurchase required -
Outputting Lists with ngFor
Rendering lists using ngFor directive• 03:43 min • videoPurchase required -
Optional Assignment Solution
Solution for directives assignment• 00:00 min • videoPurchase required -
Getting the Index when using ngFor
How to access index in ngFor loops• 00:00 min • videoPurchase required
-
Project Introduction
Introduction to the project section• 00:00 min • videoPurchase required -
Planning the App
Planning the application structure and features• 00:00 min • videoPurchase required -
Setting up the Application
Setting up the Angular application structure• 04:31 min • videoPurchase required -
Creating the Components
Creating the main components for the application• 09:32 min • videoPurchase required -
Using the Components
Implementing and using the created components• 00:00 min • videoPurchase required -
Adding a Navigation Bar
Creating and implementing a navigation bar• 00:00 min • videoPurchase required -
Creating a Recipe Model
Defining the Recipe data model• 04:33 min • videoPurchase required -
Adding Content to the Recipes Components
Populating recipe components with content• 07:41 min • videoPurchase required -
Outputting a List of Recipes with ngFor
Displaying recipes list using ngFor• 00:00 min • videoPurchase required -
Displaying Recipe Details
Showing detailed information for recipes• 05:52 min • videoPurchase required -
Working on the ShoppingListComponent
Developing the shopping list component• 00:00 min • videoPurchase required -
Creating an Ingredient Model
Defining the Ingredient data model• 00:00 min • videoPurchase required -
Creating and Outputting the Shopping List
Building and displaying the shopping list• 00:00 min • videoPurchase required -
Adding a Shopping List Edit Section
Creating edit functionality for shopping list• 03:28 min • videoPurchase required -
Wrap Up Next Steps
Summary and next steps for the project• 00:00 min • videoPurchase required
-
Understanding Angular Error Messages
How to read and understand Angular error messages• 00:00 min • videoPurchase required -
Debugging Code in the Browser Using Sourcemaps
Debugging Angular code with browser sourcemaps• 05:32 min • videoPurchase required
-
Module Introduction
Introduction to deep dive components and data binding• 00:36 min • videoPurchase required -
Splitting Apps into Components
How to properly split applications into components• 00:00 min • videoPurchase required -
Property Event Binding Overview
Overview of property and event binding• 00:00 min • videoPurchase required -
Binding to Custom Properties
Creating and binding to custom component properties• 05:43 min • videoPurchase required -
Assigning an Alias to Custom Properties
Using aliases for custom properties• 00:00 min • videoPurchase required -
Binding to Custom Events
Creating and handling custom events• 09:05 min • videoPurchase required -
Assigning an Alias to Custom Events
Using aliases for custom events• 00:57 min • videoPurchase required -
Custom Property and Event Binding Summary
Summary of custom property and event binding• 02:02 min • videoPurchase required -
Understanding View Encapsulation
Understanding Angular view encapsulation• 04:59 min • videoPurchase required -
More on View Encapsulation
Advanced topics on view encapsulation• 02:43 min • videoPurchase required -
Using Local References in Templates
Working with local template references• 00:00 min • videoPurchase required -
Getting Access to the Template DOM with ViewChild
Accessing template elements using ViewChild• 05:02 min • videoPurchase required -
Projecting Content into Components with ng-content
Content projection using ng-content• 00:00 min • videoPurchase required -
Understanding the Component Lifecycle
Angular component lifecycle hooks• 04:54 min • videoPurchase required -
Seeing Lifecycle Hooks in Action
Practical examples of lifecycle hooks• 11:55 min • videoPurchase required -
Lifecycle Hooks and Template Access
Accessing templates during lifecycle• 02:33 min • videoPurchase required -
Getting Access to ng-content with ContentChild
Accessing projected content with ContentChild• 03:00 min • videoPurchase required -
Wrap Up
Summary of components and data binding• 00:49 min • videoPurchase required -
Optional Assignment Solution
Solution for the optional assignment• 12:21 min • videoPurchase required
-
Introduction
Project introduction for components and data binding• 00:50 min • videoPurchase required -
Adding Navigation with Event Binding and ngIf
Implementing navigation with event binding and ngIf• 07:31 min • videoPurchase required -
Passing Recipe Data with Property Binding
Passing recipe data using property binding• 00:00 min • videoPurchase required -
Passing Data with Event and Property Binding Combined
Combined use of event and property binding• 10:31 min • videoPurchase required -
Allowing the User to Add Ingredients to the Shopping List
Adding ingredients functionality to shopping list• 00:00 min • videoPurchase required
-
Module Introduction
Introduction to deep dive directives• 01:23 min • videoPurchase required -
ngFor and ngIf Recap
Recap of ngFor and ngIf directives• 00:00 min • videoPurchase required -
ngClass and ngStyle Recap
Recap of ngClass and ngStyle directives• 00:00 min • videoPurchase required -
Creating a Basic Attribute Directive
Building a basic attribute directive• 00:00 min • videoPurchase required -
Using the Renderer to build a Better Attribute Directive
Improving directives with Renderer• 07:04 min • videoPurchase required -
Using HostListener to Listen to Host Events
Listening to host element events with HostListener• 00:00 min • videoPurchase required -
Using HostBinding to Bind to Host Properties
Binding to host properties with HostBinding• 03:17 min • videoPurchase required -
Binding to Directive Properties
Binding data to directive properties• 06:43 min • videoPurchase required -
What Happens behind the Scenes on Structural Directives
Understanding structural directives internals• 03:04 min • videoPurchase required -
Building a Structural Directive
Creating custom structural directives• 00:00 min • videoPurchase required -
Understanding ngSwitch
Working with ngSwitch directive• 00:00 min • videoPurchase required
-
Building and Using a Dropdown Directive
Creating and implementing a dropdown directive• 06:25 min • videoPurchase required
-
Module Introduction
Introduction to services and dependency injection• 00:00 min • videoPurchase required -
Why would you Need Services
Understanding the need for services in Angular• 02:04 min • videoPurchase required -
Creating a Logging Service
Building a logging service• 03:32 min • videoPurchase required -
Injecting the Logging Service into Components
Injecting services into components• 06:21 min • videoPurchase required -
Creating a Data Service
Building a data service• 00:00 min • videoPurchase required -
Understanding the Hierarchical Injector
Angular's hierarchical dependency injection system• 02:40 min • videoPurchase required -
How many Instances of Service Should It Be
Understanding service instances and scope• 02:12 min • videoPurchase required -
Injecting Services into Services
Service to service dependency injection• 05:13 min • videoPurchase required -
Using Services for Cross-Component Communication
Communicating between components using services• 00:00 min • videoPurchase required -
Optional Assignment Solution
Solution for services assignment• 09:37 min • videoPurchase required
-
Introduction
Project introduction for services and dependency injection• 00:00 min • videoPurchase required -
Setting up the Services
Setting up services for the project• 01:15 min • videoPurchase required -
Managing Recipes in a Recipe Service
Implementing recipe management in a service• 00:00 min • videoPurchase required -
Using a Service for Cross-Component Communication
Component communication via services• 05:07 min • videoPurchase required -
Adding the Shopping List Service
Implementing shopping list service• 00:00 min • videoPurchase required -
Using Services for Pushing Data from A to B
Data transfer between components using services• 00:00 min • videoPurchase required -
Adding Ingredients to Recipes
Managing ingredients in recipes via services• 03:41 min • videoPurchase required -
Passing Ingredients from Recipes to the Shopping List via a Service
Transferring ingredients between components using services• 07:03 min • videoPurchase required
-
Module Introduction
Introduction to Angular routing• 01:26 min • videoPurchase required -
Why do we need a Router
Understanding the need for routing in Angular• 01:16 min • videoPurchase required -
Setting up and Loading Routes
Configuring and loading Angular routes• 08:01 min • videoPurchase required -
Navigating with Router Links
Navigation using router links• 00:00 min • videoPurchase required -
Understanding Navigation Paths
Understanding routing paths and configurations• 00:00 min • videoPurchase required -
Styling Active Router Links
Styling active navigation links• 00:00 min • videoPurchase required -
Navigating Programmatically
Programmatic navigation in Angular• 00:00 min • videoPurchase required -
Using Relative Paths in Programmatic Navigation
Relative path navigation programmatically• 00:00 min • videoPurchase required -
Passing Parameters to Routes
Passing parameters in route navigation• 00:00 min • videoPurchase required -
Fetching Route Parameters
Retrieving parameters from routes• 04:01 min • videoPurchase required -
Fetching Route Parameters Reactively
Reactive approach to fetching route parameters• 07:25 min • videoPurchase required -
An Important Note about Route Observables
Important considerations for route observables• 02:42 min • videoPurchase required -
Passing Query Parameters and Fragments
Working with query parameters and fragments• 00:00 min • videoPurchase required -
Retrieving Query Parameters and Fragments
Retrieving query parameters and fragments from routes• 00:00 min • videoPurchase required -
Practicing and some Common Gotchas
Practice and common routing pitfalls• 06:07 min • videoPurchase required -
Setting up Child (Nested) Routes
Configuring nested routes in Angular• 00:00 min • videoPurchase required -
Using Query Parameters - Practice
Practice exercise for query parameters• 05:36 min • videoPurchase required -
Configuring the Handling of Query Parameters
Configuration options for query parameters• 01:50 min • videoPurchase required -
Redirecting and Wildcard Routes
Redirect routes and wildcard configurations• 00:00 min • videoPurchase required -
Outsourcing the Route Configuration
Externalizing route configurations• 04:40 min • videoPurchase required -
An Introduction to Guards
Introduction to route guards in Angular• 01:45 min • videoPurchase required -
Protecting Routes with canActivate
Route protection using canActivate guard• 08:55 min • videoPurchase required -
Protecting Child (Nested) Routes with canActivateChild
Protecting nested routes with canActivateChild• 00:00 min • videoPurchase required -
Using a Fake Auth Service
Implementing a fake authentication service for testing• 01:43 min • videoPurchase required
-
Controlling Navigation with canDeactivate
Using canDeactivate guard to control navigation• 12:28 min • videoPurchase required -
Passing Static Data to a Route
Passing static data through routes• 00:00 min • videoPurchase required -
Resolving Dynamic Data with the resolve Guard
Data pre-fetching with resolve guard• 09:53 min • videoPurchase required -
Understanding Location Strategies
Different Angular location strategies• 00:00 min • videoPurchase required -
Wrap Up
Routing module summary• 00:51 min • videoPurchase required
-
Planning the General Structure
Planning routing structure for the project• 00:00 min • videoPurchase required -
Setting Up Routes
Setting up initial routes for the project• 07:58 min • videoPurchase required -
Adding Navigation to the App
Implementing navigation in the application• 00:00 min • videoPurchase required -
Marking Active Routes
Highlighting active navigation routes• 00:00 min • videoPurchase required -
Fixing Page Reload Issues
Resolving page reload problems in routing• 00:00 min • videoPurchase required -
Child Routes - Challenge
Challenge exercise for child routes• 00:00 min • videoPurchase required -
Adding Child Routing Together
Implementing child routing in the project• 04:21 min • videoPurchase required -
Configuring Route Parameters
Setting up route parameters configuration• 00:00 min • videoPurchase required -
Passing Dynamic Parameters to Links
Dynamic parameter passing in navigation links• 03:01 min • videoPurchase required -
Styling Active Recipe Items
Applying styles to active recipe navigation items• 01:14 min • videoPurchase required -
Adding Editing Routes
Adding routes for edit functionality• 00:00 min • videoPurchase required -
Retrieving Route Parameters
Retrieving parameters from edit routes• 03:19 min • videoPurchase required -
Programmatic Navigation to the Edit Page
Programmatic navigation for edit functionality• 00:00 min • videoPurchase required -
One Note about Route Observables
Important note about route observables• 00:00 min • videoPurchase required
-
Module Introduction
Introduction to observables module• 00:00 min • videoPurchase required -
Analyzing Angular Observables
Analysis of Angular's observable implementation• 02:15 min • videoPurchase required -
Getting Closer to the Core of Observables
Deep dive into observable fundamentals• 00:00 min • videoPurchase required -
Building a Custom Observable
Creating custom observables from scratch• 00:00 min • videoPurchase required -
Errors Completion
Error handling and observable completion• 06:39 min • videoPurchase required -
Observables You
Practical applications of observables• 01:55 min • videoPurchase required -
Understanding Operators
RxJS operators and their usage• 08:39 min • videoPurchase required -
Subjects
Understanding and using RxJS Subjects• 00:00 min • videoPurchase required -
Wrap Up
Observables module summary• 00:00 min • videoPurchase required
-
Improving the Reactive Service with Observables (Subjects)
Enhancing services using observables and subjects• 06:04 min • videoPurchase required
-
Module Introduction
Introduction to forms module• 00:00 min • videoPurchase required -
Why do we Need Angular's Help
Understanding Angular's form handling benefits• 02:21 min • videoPurchase required -
Template-Driven (TD) vs Reactive Approach
Comparing template-driven and reactive forms• 00:00 min • videoPurchase required -
An Example Form
Basic form example demonstration• 01:32 min • videoPurchase required -
TD - Creating the Form and Registering the Controls
Template-driven form creation and control registration• 05:42 min • videoPurchase required -
TD - Submitting and Using the Form
Form submission and data usage in template-driven forms• 00:00 min • videoPurchase required -
TD - Understanding Form State
Understanding form states in template-driven approach• 00:00 min • videoPurchase required -
TD - Accessing the Form with ViewChild
Accessing form using ViewChild decorator• 03:03 min • videoPurchase required -
TD - Adding Validation to check User Input
Adding validation to template-driven forms• 00:00 min • videoPurchase required -
TD - Using the Form State
Utilizing form states for UI feedback• 00:00 min • videoPurchase required -
TD - Outputting Validation Error Messages
Displaying validation error messages• 00:00 min • videoPurchase required -
TD - Set Default Values with ngModel Property Binding
Setting default values using ngModel• 00:00 min • videoPurchase required -
TD - Using ngModel with Two-Way Binding
Two-way binding with ngModel in forms• 02:48 min • videoPurchase required -
TD - Grouping Form Controls
Organizing form controls into groups• 00:00 min • videoPurchase required -
TD - Handling Radio Buttons
Working with radio buttons in forms• 03:27 min • videoPurchase required -
TD - Setting and Patching Form Values
Setting and updating form values programmatically• 00:00 min • videoPurchase required -
TD - Using Form Data
Working with form data after submission• 00:00 min • videoPurchase required -
TD - Resetting Forms
Resetting forms to initial state• 00:00 min • videoPurchase required -
Introduction to the Reactive Approach
Introduction to reactive forms approach• 00:40 min • videoPurchase required -
Reactive - Setup
Setting up reactive forms• 02:26 min • videoPurchase required -
Reactive - Creating a Form in Code
Programmatically creating reactive forms• 00:00 min • videoPurchase required -
Reactive - Syncing HTML and Form
Synchronizing HTML template with reactive form• 00:00 min • videoPurchase required -
Reactive - Submitting the Form
Handling form submission in reactive forms• 00:00 min • videoPurchase required -
Reactive - Adding Validation
Adding validation to reactive forms• 00:00 min • videoPurchase required -
Reactive - Getting Access to Controls
Accessing form controls programmatically• 00:00 min • videoPurchase required -
Reactive - Grouping Controls
Grouping form controls in reactive forms• 00:00 min • videoPurchase required
-
Reactive - Arrays of Form Controls (FormArray)
Working with dynamic form arrays• 00:00 min • videoPurchase required -
Reactive - Creating Custom Validators
Building custom validation functions• 06:11 min • videoPurchase required -
Reactive - Using Error Codes
Working with validation error codes• 00:00 min • videoPurchase required -
Reactive - Creating a Custom Async Validator
Building asynchronous custom validators• 04:38 min • videoPurchase required -
Reactive - Reacting to Status or Value Changes
Reacting to form status and value changes• 02:11 min • videoPurchase required -
Reactive - Setting and Patching Values
Setting and updating reactive form values• 00:00 min • videoPurchase required -
Optional Assignment Solution
Solution for forms assignment• 13:48 min • videoPurchase required
-
Introduction
Project introduction for forms implementation• 00:59 min • videoPurchase required -
TD - Adding the Shopping List Form
Adding template-driven shopping list form• 00:00 min • videoPurchase required -
Adding Validation to the Form
Implementing form validation• 00:00 min • videoPurchase required -
Allowing the Selection of Items in the List
Enabling item selection in forms• 00:00 min • videoPurchase required -
Loading the Shopping List Items into the Form
Pre-populating form with existing data• 00:00 min • videoPurchase required -
Updating existing Items
Updating existing form items• 00:00 min • videoPurchase required -
Resetting the Form
Form reset functionality• 00:00 min • videoPurchase required -
Allowing the the User to Clear (Cancel) the Form
Adding form cancel/clear functionality• 00:00 min • videoPurchase required -
Allowing the Deletion of Shopping List Items
Implementing delete functionality for items• 00:00 min • videoPurchase required -
Creating the Template for the (Reactive) Recipe Edit Form
Template creation for reactive recipe edit form• 00:00 min • videoPurchase required -
Creating the Form For Editing Recipes
Building reactive form for recipe editing• 00:00 min • videoPurchase required -
Syncing HTML with the Form
Synchronizing template with reactive form• 03:52 min • videoPurchase required -
Adding Ingredient Controls to a Form Array
Managing ingredients with form arrays• 05:39 min • videoPurchase required -
Adding new Ingredient Controls
Dynamically adding ingredient controls• 00:00 min • videoPurchase required -
Validating User Input
Implementing input validation for forms• 00:00 min • videoPurchase required -
Submitting the Recipe Edit Form
Handling recipe edit form submission• 07:30 min • videoPurchase required -
Adding a Delete and Clear (Cancel) Functionality
Adding delete and cancel functions to forms• 00:00 min • videoPurchase required -
Redirecting the User after Deleting a Recipe
Navigation after recipe deletion• 00:00 min • videoPurchase required -
Adding an Image Preview
Image preview functionality in forms• 00:00 min • videoPurchase required -
Providing the Recipe Service Correctly
Proper service implementation for forms• 01:58 min • videoPurchase required -
Deleting Ingredients and Some Finishing Touches
Final touches including ingredient deletion• 00:00 min • videoPurchase required
-
Introduction Why Pipes are Useful
Introduction to Angular pipes and their benefits• 02:01 min • videoPurchase required -
Using Pipes
Basic usage of Angular pipes• 00:00 min • videoPurchase required -
Parametrizing Pipes
Passing parameters to pipes• 00:00 min • videoPurchase required -
Where to learn more about Pipes
Resources for learning more about pipes• 01:56 min • videoPurchase required -
Chaining Multiple Pipes
Combining multiple pipes together• 02:20 min • videoPurchase required -
Creating a Custom Pipe
Building custom Angular pipes• 00:00 min • videoPurchase required -
Parametrizing a Custom Pipe
Adding parameters to custom pipes• 02:36 min • videoPurchase required -
Example - Creating a Filter Pipe
Example of building a filter pipe• 07:01 min • videoPurchase required -
Pure and Impure Pipes (or How to fix the Filter Pipe)
Understanding pure vs impure pipes• 00:00 min • videoPurchase required -
Understanding the async Pipe
Working with async pipe for observables• 00:00 min • videoPurchase required
-
A New IDE
Introduction to a new development environment• 00:43 min • videoPurchase required -
Module Introduction
Introduction to HTTP requests module• 01:06 min • videoPurchase required -
How Does Angular Interact With Backends
Understanding Angular-backend communication• 00:00 min • videoPurchase required -
The Anatomy of a Http Request
Structure of HTTP requests• 00:00 min • videoPurchase required -
Backend (Firebase) Setup
Setting up Firebase backend• 00:00 min • videoPurchase required -
Sending a POST Request
Making POST requests in Angular• 10:11 min • videoPurchase required -
GETting Data
Retrieving data with GET requests• 00:00 min • videoPurchase required -
Using RxJS Operators to Transform Response Data
Transforming HTTP responses with RxJS• 03:59 min • videoPurchase required -
Using Types with the HttpClient
Type safety with HTTP client• 00:00 min • videoPurchase required -
Outputting Posts
Displaying retrieved posts data• 00:00 min • videoPurchase required -
Outputting Posts
Displaying retrieved posts data• 00:00 min • videoPurchase required -
Showing a Loading Indicator
Displaying loading indicators during requests• 02:03 min • videoPurchase required -
Using a Service for Http Requests
Organizing HTTP requests in services• 06:37 min • videoPurchase required -
Services Components Working Together
Service-component collaboration for HTTP• 00:00 min • videoPurchase required -
Sending a DELETE Request
Making DELETE requests• 00:00 min • videoPurchase required -
Handling Errors
HTTP error handling strategies• 06:38 min • videoPurchase required -
Using Subjects for Error Handling
Error handling with RxJS Subjects• 02:39 min • videoPurchase required -
Using the catchError Operator
Error handling with catchError operator• 00:00 min • videoPurchase required -
Error Handling UX
User experience for error handling• 00:00 min • videoPurchase required -
Setting Headers
Configuring HTTP request headers• 00:00 min • videoPurchase required -
Adding Query Params
Working with query parameters• 00:00 min • videoPurchase required -
Observing Different Types of Responses
Handling different response types• 07:32 min • videoPurchase required -
Changing the Response Body Type
Modifying response body type expectations• 00:00 min • videoPurchase required -
Introducing Interceptors
Introduction to HTTP interceptors• 07:24 min • videoPurchase required -
Manipulating Request Objects
Modifying HTTP requests with interceptors• 02:32 min • videoPurchase required -
Response Interceptors
Intercepting and modifying HTTP responses• 00:00 min • videoPurchase required -
Multiple Interceptors
Working with multiple HTTP interceptors• 04:52 min • videoPurchase required -
Wrap Up
HTTP module summary• 00:00 min • videoPurchase required
-
Module Introduction
Project introduction for HTTP implementation• 00:55 min • videoPurchase required -
Backend (Firebase) Setup
Setting up Firebase for the project• 00:00 min • videoPurchase required -
Setting Up the DataStorage Service
Creating data storage service for HTTP• 00:00 min • videoPurchase required -
Storing Recipes
Saving recipes to backend• 00:00 min • videoPurchase required -
Fetching Recipes
Retrieving recipes from backend• 05:38 min • videoPurchase required -
Transforming Response Data
Transforming HTTP response data• 04:17 min • videoPurchase required -
Resolving Data Before Loading
Pre-fetching data with route resolvers• 00:00 min • videoPurchase required -
Fixing a Bug with the Resolver
Debugging and fixing resolver issues• 00:00 min • videoPurchase required
-
Module Introduction
Introduction to authentication module• 00:00 min • videoPurchase required -
How Authentication Works
Fundamentals of authentication systems• 00:00 min • videoPurchase required -
Adding the Auth Page
Creating authentication page• 06:44 min • videoPurchase required -
Switching Between Auth Modes
Toggling between login and signup modes• 00:00 min • videoPurchase required -
Handling Form Input
Processing authentication form input• 00:00 min • videoPurchase required -
Preparing the Backend
Backend setup for authentication• 00:00 min • videoPurchase required -
Preparing the Signup Request
Setting up signup HTTP request• 00:00 min • videoPurchase required -
Preparing the Signup Request
Setting up the signup request configuration• videoPurchase required -
Sending the Signup Request
Implementing the signup request functionality• videoPurchase required -
Adding a Loading Spinner and Error Handling Logic
Implementing loading indicators and error handling for signup• videoPurchase required -
Improving Error Handling
Enhancing error handling mechanisms• videoPurchase required -
Sending Login Requests
Implementing login request functionality• videoPurchase required -
Login Error Handling
Handling errors during login process• videoPurchase required -
Creating and Storing the User Data
Managing user data storage and retrieval• 10:16 min • videoPurchase required -
Reflecting the Auth State in the UI
Updating UI based on authentication state• 09:41 min • videoPurchase required -
Adding the Token to Outgoing Requests
Attaching authentication tokens to HTTP requests• 10:15 min • videoPurchase required -
Attaching the Token with an Interceptor
Using interceptors to automatically attach tokens• 08:48 min • videoPurchase required -
Adding Logout
Implementing logout functionality• videoPurchase required -
Adding Auto Login
Implementing automatic login functionality• 09:54 min • videoPurchase required -
Adding Auto Logout
Implementing automatic logout functionality• 07:39 min • videoPurchase required -
Adding an Auth Guard
Creating authentication guards for route protection• 10:56 min • videoPurchase required -
Wrap Up
Summary of authentication module• videoPurchase required
-
Module Introduction
Introduction to dynamic components module• 01:09 min • videoPurchase required -
Adding an Alert Modal Component
Creating an alert modal component• videoPurchase required -
Understanding the Different Approaches
Exploring different approaches to dynamic components• 02:28 min • videoPurchase required -
Using ngIf
Using ngIf for conditional component rendering• videoPurchase required -
Preparing Programmatic Creation
Setting up for programmatic component creation• videoPurchase required -
Creating a Component Programmatically
Creating components dynamically in code• videoPurchase required -
Understanding entryComponents
Understanding entryComponents concept• videoPurchase required -
Data Binding and Event Binding
Implementing data and event binding for dynamic components• 05:05 min • videoPurchase required -
Wrap Up
Summary of dynamic components module• 01:25 min • videoPurchase required
-
Module Introduction
Introduction to modules and optimization• 00:41 min • videoPurchase required -
What are Modules?
Understanding Angular modules• videoPurchase required -
Analyzing the AppModule
Analyzing the main application module• 06:24 min • videoPurchase required -
Getting Started with Feature Modules
Introduction to feature modules• 08:59 min • videoPurchase required -
Splitting Modules Correctly
Best practices for module organization• videoPurchase required -
Adding Routes to Feature Modules
Configuring routes within feature modules• videoPurchase required -
Component Declarations
Understanding component declarations in modules• videoPurchase required -
The ShoppingList Feature Module
Creating a shopping list feature module• videoPurchase required -
Understanding Shared Modules
Working with shared modules• videoPurchase required -
Understanding the Core Module
Working with core modules• 05:48 min • videoPurchase required -
Adding an Auth Feature Module
Creating authentication feature module• 04:22 min • videoPurchase required -
Understanding Lazy Loading
Introduction to lazy loading• videoPurchase required -
Implementing Lazy Loading
Practical implementation of lazy loading• 12:20 min • videoPurchase required -
More Lazy Loading
Advanced lazy loading concepts• videoPurchase required -
Preloading Lazy Loaded Code
Implementing preloading strategies• videoPurchase required -
Modules and Services
Managing services across modules• videoPurchase required -
Loading Services Differently
Different approaches to service loading• videoPurchase required
-
Module Introduction
Introduction to standalone components• 01:27 min • videoPurchase required -
Starting Setup - Why We Want Standalone Components
Understanding the benefits of standalone components• videoPurchase required -
Building a First Standalone Component
Creating your first standalone component• 09:49 min • videoPurchase required -
Standalone Directives - Connecting Building Blocks
Working with standalone directives• videoPurchase required -
Migrating Another Component
Migrating existing components to standalone• videoPurchase required -
A Standalone Root Component
Creating standalone root component• 04:20 min • videoPurchase required -
Services and Standalone Components
Using services with standalone components• videoPurchase required -
Routing with Standalone Components
Implementing routing with standalone components• videoPurchase required -
Lazy Loading
Implementing lazy loading with standalone components• 08:04 min • videoPurchase required -
Summary
Summary of standalone components module• videoPurchase required
-
Module Introduction
Introduction to Angular Signals• mp4Purchase required -
Signals - What and Why?
Understanding what signals are and why to use them• mp4Purchase required -
Creating a New Signal
Creating and using signals• 4 min • mp4Purchase required -
Updating a Signal Value
Updating signal values• mp4Purchase required -
Reading and Outputting a Signal Value
Reading and displaying signal values• mp4Purchase required -
Signal Updating - set(), update(), mutate()
Different methods for updating signals• mp4Purchase required -
Important - Signals are NOT Finished Yet
Current state and limitations of signals• 1 min • mp4Purchase required -
Computed Values and Effects
Working with computed values and effects• 3.00 min • mp4Purchase required -
Module Summary
Summary of Angular Signals module• mp4Purchase required
-
Module Introduction
Introduction to NgRx state management• videoPurchase required -
What Is NgRx?
Understanding NgRx and its purpose• 02:08 min • videoPurchase required -
Understanding NgRx and Its Building Blocks
Exploring NgRx architecture and components• videoPurchase required -
Project Setup - Installing NgRx
Setting up NgRx in a project• videoPurchase required -
Adding a First Reducer and Store Setup
Creating first reducer and setting up store• 08:35 min • videoPurchase required -
An Alternative Way Of Creating Reducers
Alternative approaches to creating reducers• 04:19 min • videoPurchase required -
Reading Data From The Store
Accessing data from NgRx store• 09:36 min • videoPurchase required -
Introducing Actions and State-Changing Reducers
Working with actions and state changes• 07:48 min • videoPurchase required -
Dispatching Actions
Dispatching actions to update state• videoPurchase required -
Attaching Data To Actions
Adding payload data to actions• videoPurchase required -
Handling Actions Without createReducer
Alternative action handling approaches• videoPurchase required -
An Alternative Way Of Defining Actions
Different approaches to defining actions• 10:02 min • videoPurchase required -
Time To Practice - A Second Action
Practice exercise for creating actions• videoPurchase required -
Exploring Selectors
Working with selectors for data retrieval• videoPurchase required -
Introducing Effects
Understanding NgRx effects• videoPurchase required -
Installing the Effects Package
Setting up NgRx effects• videoPurchase required -
Defining a First Effect
Creating your first NgRx effect• 08:40 min • videoPurchase required -
The Old @Effect Decorator and Registering Effects
Legacy approaches to effects• videoPurchase required -
Using Store Data In Effects
Accessing store data within effects• 03:24 min • videoPurchase required -
Adding a Second Effect
Creating additional effects• 09:58 min • videoPurchase required -
Summary
Summary of NgRx module• videoPurchase required
-
Introduction
Introduction to Angular animations• videoPurchase required -
Setting up the Starting Project
Project setup for animations• videoPurchase required -
Animations, Triggers and State
Understanding animation triggers and states• videoPurchase required -
Switching between States
Transitioning between animation states• videoPurchase required -
Transitions
Creating animation transitions• videoPurchase required -
Advanced Transitions
Advanced transition techniques• videoPurchase required -
Transition Phases
Understanding transition phases• videoPurchase required -
The 'void' State
Working with the void state• videoPurchase required -
Using Keyframes for Animations
Creating animations with keyframes• videoPurchase required -
Grouping Transitions
Grouping multiple transitions• videoPurchase required -
Using Animation Callbacks
Working with animation callbacks• videoPurchase required
-
Module Introduction
Introduction to service workers• videoPurchase required -
Adding Service Workers
Implementing service workers in Angular• 12:41 min • videoPurchase required -
Caching Assets for Offline Use
Caching application assets• videoPurchase required -
Caching Dynamic Assets and URLs
Caching dynamic content and URLs• videoPurchase required
-
Introduction
Introduction to unit testing• 01:18 min • videoPurchase required -
Why Unit Tests?
Understanding the importance of unit tests• videoPurchase required -
Analyzing the Testing Setup (as created by the CLI)
Understanding CLI-generated test setup• videoPurchase required -
Running Tests with the CLI
Running tests using Angular CLI• videoPurchase required -
Adding a Component and some fitting Tests
Creating components and corresponding tests• videoPurchase required -
Testing Dependencies - Components and Services
Testing components with dependencies• 06:55 min • videoPurchase required -
Simulating Async Tasks
Testing asynchronous operations• videoPurchase required -
Using 'fakeAsync' and 'tick'
Working with fakeAsync and tick for testing• videoPurchase required -
Isolated vs Non-Isolated Tests
Comparing isolated and non-isolated testing approaches• 06:10 min • videoPurchase required
-
Module Introduction
Introduction to Angular platform and CLI• videoPurchase required -
A Closer Look at 'ng new'
Exploring ng new command in detail• videoPurchase required -
IDE and Project Setup
Setting up IDE and project configuration• 02:31 min • videoPurchase required -
Understanding the Config Files
Understanding Angular configuration files• 09:01 min • videoPurchase required -
Important CLI Commands
Essential Angular CLI commands• videoPurchase required -
The 'angular.json' File - A Closer Look
Detailed exploration of angular.json• 11:18 min • videoPurchase required -
Angular Schematics - An Introduction
Introduction to Angular schematics• videoPurchase required -
The 'ng add' Command
Using ng add to add packages• videoPurchase required -
Using Custom 'ng generate' Schematics
Creating and using custom schematics• videoPurchase required -
Smooth Updating of Projects with 'ng update'
Updating Angular projects smoothly• videoPurchase required -
Simplified Deployment with 'ng deploy'
Deploying applications with ng deploy• videoPurchase required -
Understanding Differential Loading
Understanding differential loading concept• videoPurchase required -
Managing Multiple Projects in One Folder
Working with multiple Angular projects• 04:35 min • videoPurchase required -
Angular Libraries - An Introduction
Introduction to Angular libraries• videoPurchase required -
Wrap Up
Summary of Angular platform and CLI module• videoPurchase required
-
Module Introduction
Introduction to TypeScript module• videoPurchase required -
What and Why?
Understanding TypeScript purpose and benefits• videoPurchase required -
Installing and Using TypeScript
Setting up and using TypeScript• videoPurchase required -
Base Types and Primitives
Understanding basic TypeScript types• videoPurchase required -
Array and Object Types
Working with array and object types• videoPurchase required -
Type Inference
Understanding TypeScript type inference• videoPurchase required -
Working with Union Types
Using union types in TypeScript• videoPurchase required -
Assigning Type Aliases
Creating and using type aliases• videoPurchase required -
Diving into Functions and Function Types
Working with functions and function types• videoPurchase required -
Understanding Generics
Introduction to TypeScript generics• videoPurchase required -
Classes and TypeScript
Working with classes in TypeScript• videoPurchase required -
Working with Interfaces
Using interfaces in TypeScript• videoPurchase required -
Configuring the TypeScript Compiler
Configuring TypeScript compiler options• videoPurchase required
Frequently Asked Questions
No frequently asked questions available for this course yet.
Check back later or contact support if you have any questions.
Student Reviews
No reviews yet. Be the first to review this course!
$149.99
This course includes:
- 704 downloadable files
- Full lifetime access
- Customer support
- Course FAQ section
About the Instructor
M
Maximilian Schwarzmüller
Course Instructor
Professional Web Developer and Instructor with 10+ years experience
30-Day Money-Back Guarantee