Home └Angular - The Complete Guide (2023 Edition)
Angular - The Complete Guide (2023 Edition)

Angular - The Complete Guide (2023 Edition)


Join Course
Responsible Nguyễn Trung Dũng
Last Update 05/29/2023
Completion Time 1 day 13 hours 13 minutes
Members 2
  • 01 Getting Started
    • 001 Course Introduction
    • 002 What is Angular
    • 003 Join our Online
    • 004 Angular vs Angular 2 vs Latest Angular Version
    • 005 CLI Deep Dive _ Troubleshooting
    • 006 Project Setup and First App
    • 007 Editing the First App
    • 008 The Course Structure
    • 009 How to get the Most out of the Course
    • 010 What is TypeScript
    • 011 Optional TypeScript Quick Introduction
    • 012 A Basic Project Setup using Bootstrap for Styling
    • 013 About the Course Code Code Snapshots
  • 02 The Basics
    • 001 Module Introduction
    • 002 How an Angular App gets Loaded and Started
    • 003 Components are Important!
    • 004 Creating a New Component
    • 005 Understanding the Role of AppModule and Component Declaration.mp4
    • 006 Using Custom Components
    • 007 Creating Components with the CLI _ Nesting Components
    • 008 Working with Component Templates
    • 009 Working with Component Styles
    • 010 Fully Understanding the Component Selector
    • 011 [OPTIONAL] Assignment Solution
    • 012 What is Databinding
    • 013 String Interpolation
    • 014 Property Binding
    • 015 Property Binding vs String Interpolation
    • 016 Event Binding
    • 017 Bindable Properties and Events
    • 018 Passing and Using Data with Event Binding
    • 019 Important FormsModule is Required for Two-Way-Binding!
    • 024 Using ngIf to Output Data Conditionally
    • 026 Styling Elements Dynamically with ngStyle
    • 027 Applying CSS Classes Dynamically with ngClass
    • 028 Outputting Lists with ngFor
    • 029 [OPTIONAL] Assignment Solution
    • 030 Getting the Index when using ngFor
    • 020 Two-Way-Databinding
    • 021 Combining all Forms of Databinding
    • 022 [OPTIONAL] Assignment Solution
    • 023 Understanding Directives
    • 025 Enhancing ngIf with an Else Condition
  • 03 Course Project - The Basics
    • 001 Project Introduction
    • 002 Planning the App
    • 003 Creating a New App Correctly
    • 004 Setting up the Application
    • 005 Creating the Components
    • 006 Using the Components
    • 007 Adding a Navigation Bar
    • 008 Alternative Non-Collapsable Navigation Bar (1)
    • 009 Creating a Recipe Model
    • 010 Adding Content to the Recipes Components
    • 011 Outputting a List of Recipes with ngFor
    • 012 Displaying Recipe Details
    • 013 Working on the ShoppingListComponent
    • 014 Creating an Ingredient Model
    • 015 Creating and Outputting the Shopping List
    • 016 Adding a Shopping List Edit Section
    • 017 Wrap Up _ Next Steps (1)
  • 04 Debugging
    • 001 Understanding Angular Error Messages
    • 002 Debugging Code in the Browser Using Sourcemaps
  • 05 Components _ Databinding Deep Dive
    • 001 Module Introduction
    • 002 Splitting Apps into Components
    • 003 Property _ Event Binding Overview
    • 004 Binding to Custom Properties
    • 005 Assigning an Alias to Custom Properties
    • 006 Binding to Custom Events
    • 007 Assigning an Alias to Custom Events
    • 008 Custom Property and Event Binding Summary
    • 009 Understanding View Encapsulation
    • 010 More on View Encapsulation
    • 011 Using Local References in Templates
    • 012 @ViewChild() in Angular 8+
    • 013 Getting Access to the Template _ DOM with @ViewChild
    • 014 Projecting Content into Components with ng-content
    • 015 Understanding the Component Lifecycle
    • 016 Seeing Lifecycle Hooks in Action
    • 017 Lifecycle Hooks and Template Access
    • 018 @ContentChild() in Angular 8+
    • 019 Getting Access to ng-content with @ContentChild
    • 020 Wrap Up
    • 021 [OPTIONAL] Assignment Solution
  • 06 Course Project - Components _ Databinding
    • 001 Introduction
    • 002 Adding Navigation with Event Binding and ngIf
    • 003 Passing Recipe Data with Property Binding
    • 004 Passing Data with Event and Property Binding (Combined)
    • 005 Make sure you have FormsModule added!
    • 006 Allowing the User to Add Ingredients to the Shopping List
  • 07 Directives Deep Dive
    • 001 Module Introduction
    • 002 ngFor and ngIf Recap
    • 003 ngClass and ngStyle Recap
    • 004 Creating a Basic Attribute Directive
    • 005 Using the Renderer to build a Better Attribute Directive
    • 006 More about the Renderer
    • 007 Using HostListener to Listen to Host Events
    • 008 Using HostBinding to Bind to Host Properties
    • 009 Binding to Directive Properties
    • 010 What Happens behind the Scenes on Structural Directives
    • 011 Building a Structural Directive
    • 012 Understanding ngSwitch
  • 08 Course Project - Directives
    • 001 Building and Using a Dropdown Directive
    • 002 Closing the Dropdown From Anywhere
  • 09 Using Services _ Dependency Injection
    • 001 Module Introduction
    • 002 Why would you Need Services
    • 003 Creating a Logging Service
    • 004 Injecting the Logging Service into Components
    • 005 Creating a Data Service
    • 006 Understanding the Hierarchical Injector
    • 007 How many Instances of Service Should It Be
    • 008 Injecting Services into Services
    • 009 Using Services for Cross-Component Communication
    • 010 A Different Way Of Injecting Services
    • 011 [OPTIONAL] Assignment Solution
  • 10 Course Project - Services _ Dependency Injection
    • 001 Introduction
    • 002 Setting up the Services
    • 003 Managing Recipes in a Recipe Service
    • 004 Using a Service for Cross-Component Communication
    • 005 Adding the Shopping List Service
    • 006 Using Services for Pushing Data from A to B
    • 007 Adding Ingredients to Recipes
    • 008 Passing Ingredients from Recipes to the Shopping List (via a Service)
  • 11 Changing Pages with Routing
    • 001 Module Introduction
    • 002 Why do we need a Router
    • 003 Understanding the Example Project
    • 004 Setting up and Loading Routes
    • 005 Navigating with Router Links
    • 006 Understanding Navigation Paths
    • 007 Styling Active Router Links
    • 008 Navigating Programmatically
    • 009 Using Relative Paths in Programmatic Navigation
    • 010 Passing Parameters to Routes
    • 011 Fetching Route Parameters
    • 012 Fetching Route Parameters Reactively
    • 013 An Important Note about Route Observables
    • 014 Passing Query Parameters and Fragments
    • 015 Retrieving Query Parameters and Fragments
    • 016 Practicing and some Common Gotchas
    • 017 Setting up Child (Nested) Routes
    • 018 Using Query Parameters - Practice
    • 019 Configuring the Handling of Query Parameters
    • 020 Redirecting and Wildcard Routes
    • 021 Important Redirection Path Matching, thiếu video bổ sung sau
    • 022 Outsourcing the Route Configuration
    • 023 An Introduction to Guards
    • 024 Protecting Routes with canActivate
    • 025 Protecting Child (Nested) Routes with canActivateChild
    • 026 Using a Fake Auth Service
    • 027 Controlling Navigation with canDeactivate
    • 028 Passing Static Data to a Route
    • 029 Resolving Dynamic Data with the resolve Guard
    • 030 Understanding Location Strategies
    • 031 Wrap Up
  • 12 Course Project - Routing
    • 001 Planning the General Structure
    • 002 Setting Up Routes
    • 003 Adding Navigation to the App
    • 004 Marking Active Routes
    • 005 Fixing Page Reload Issues
    • 006 Child Routes Challenge
    • 007 Adding Child Routing Together
    • 008 Configuring Route Parameters
    • 009 Passing Dynamic Parameters to Links
    • 010 Styling Active Recipe Items
    • 011 Adding Editing Routes
    • 012 Retrieving Route Parameters
    • 013 Programmatic Navigation to the Edit Page
    • 014 One Note about Route Observables
    • 015 Project Cleanup
      New
  • 13 Understanding Observables
    • 001 Module Introduction
    • 002 Install RxJS
    • 003 Analyzing Angular Observables
    • 004 Getting Closer to the Core of Observables
    • 005 Building a Custom Observable
    • 006 Errors _ Completion
    • 007 Observables _ You!
    • 008 Understanding Operators
    • 009 Subjects
    • 010 Wrap Up
    • 011 Useful Resources _ Links
  • 14 Course Project - Observables
    • 001 Improving the Reactive Service with Observables (Subjects)
    • 002 Changed the Subscription Name
  • 15 Handling Forms in Angular Apps
    • 001 Module Introduction
    • 002 Why do we Need Angular_s Help
    • 003 Template-Driven (TD) vs Reactive Approach
    • 004 An Example Form
    • 005 TD Creating the Form and Registering the Controls
    • 006 TD Submitting and Using the Form
    • 007 TD Understanding Form State
    • 008 TD Accessing the Form with @ViewChild
    • 009 TD Adding Validation to check User Input
    • 010 Built-in Validators _ Using HTML5 Validation, thiếu video và phiên âm bổ sung sau
    • 011 TD Using the Form State
    • 012 TD Outputting Validation Error Messages
    • 013 TD Set Default Values with ngModel Property Binding
    • 014 TD Using ngModel with Two-Way-Binding
    • 015 TD Grouping Form Controls
    • 016 TD Handling Radio Buttons
    • 017 TD Setting and Patching Form Values
    • 018 TD Using Form Data
    • 019 TD Resetting Forms
    • 020 Introduction to the Reactive Approach
    • 021 Reactive Setup
    • 022 Reactive Creating a Form in Code
    • 023 Reactive Syncing HTML and Form
    • 024 Reactive Submitting the Form
    • 025 Reactive Adding Validation
    • 026 Reactive Getting Access to Controls
    • 027 Reactive Grouping Controls
    • 028 Fixing a Bug
    • 029 Reactive Arrays of Form Controls (FormArray)
    • 030 Reactive Creating Custom Validators
    • 031 Reactive Using Error Codes
    • 032 Reactive Creating a Custom Async Validator
    • 033 Reactive Reacting to Status or Value Changes
    • 034 Reactive Setting and Patching Values
    • 035 [OPTIONAL] Assignment Solution
  • 16 Course Project - Forms
    • 001 Introduction
    • 002 TD Adding the Shopping List Form
    • 003 Adding Validation to the Form
    • 004 Allowing the Selection of Items in the List
    • 005 Loading the Shopping List Items into the Form
    • 006 Updating existing Items
    • 007 Resetting the Form
    • 008 Allowing the the User to Clear (Cancel) the Form
    • 009 Allowing the Deletion of Shopping List Items
    • 010 Creating the Template for the (Reactive) Recipe Edit Form
    • 011 Creating the Form For Editing Recipes
    • 012 Syncing HTML with the Form
    • 013 Fixing a Bug
    • 014 Adding Ingredient Controls to a Form Array
    • 015 Adding new Ingredient Controls
    • 016 Validating User Input
    • 017 Submitting the Recipe Edit Form
    • 018 Adding a Delete and Clear (Cancel) Functionality
    • 019 Redirecting the User (after Deleting a Recipe)
    • 020 Adding an Image Preview
    • 021 Providing the Recipe Service Correctly
    • 022 Deleting Ingredients and Some Finishing Touches
    • 023 Deleting all Items in a FormArray, thiếu video & phiên âm bổ sung sau
  • 17 Using Pipes to Transform Output
    • 001 Part 1 - Implement Page object file for Product Catalogue page with actions
    • 002 Using Pipes
    • 003 Parametrizing Pipes
    • 004 Where to learn more about Pipes
    • 005 Chaining Multiple Pipes
    • 006 Creating a Custom Pipe
    • 007 Parametrizing a Custom Pipe
    • 008 Example Creating a Filter Pipe
    • 009 Pure and Impure Pipes (or How to fix the Filter Pipe)
    • 010 Understanding the async Pipe
  • 18 Making Http Requests
    • 001 A New IDE
    • 002 Module Introduction
    • 003 How Does Angular Interact With Backends
    • 004 The Anatomy of a Http Request
    • 005 Backend (Firebase) Setup
    • 006 Sending a POST Request
    • 007 GETting Data
    • 008 Using RxJS Operators to Transform Response Data
    • 009 Using Types with the HttpClient
    • 010 Outputting Posts
    • 011 Showing a Loading Indicator
    • 012 Using a Service for Http Requests
    • 013 Services _ Components Working Together
    • 014 Sending a DELETE Request
    • 015 Handling Errors
    • 016 Using Subjects for Error Handling
    • 017 Using the catchError Operator
    • 018 Error Handling _ UX
    • 019 Setting Headers
    • 020 Adding Query Params
    • 021 Observing Different Types of Responses
    • 022 Changing the Response Body Type
    • 023 Introducing Interceptors
    • 024 Manipulating Request Objects.mp4
    • 025 Response Interceptors
    • 026 Multiple Interceptors.mp4
    • 027 Wrap Up
  • 19 Course Project - Http
    • 001 Module Introduction
    • 002 Backend (Firebase) Setup
    • 003 Setting Up the DataStorage Service
    • 004 Storing Recipes
    • 005 Fetching Recipes
    • 006 Transforming Response Data
    • 007 Resolving Data Before Loading
    • 008 Fixing a Bug with the Resolver
  • 20 Authentiaction & Route Protection in Angular
    • 001 Module Introduction
    • 002 How Authentication Works
    • 003 Adding the Auth Page
    • 004 Switching Between Auth Modes
    • 005 Handling Form Input
    • 006 Preparing the Backend
    • 007 Make sure you got Recipes in your backend!
      Preview
    • 008 Preparing the Signup Request
    • 009 Sending the Signup Request
    • 010 Adding a Loading Spinner _ Error Handling Logic
    • 011 Improving Error Handling
    • 012 Sending Login Requests
    • 013 Login Error Handling
    • 014 Creating _ Storing the User Data
    • 015 Reflecting the Auth State in the UI
    • 016 Adding the Token to Outgoing Requests
    • 017 Attaching the Token with an Interceptor
    • 018 Adding Logout
    • 019 Adding Auto-Login
    • 020 Adding Auto-Logout
    • 021 Adding an Auth Guard
    • 022 Wrap Up
    • 023 Useful Resources _ Links, thiếu video và phiên âm bổ sung sau
  • 21 Dynamic Components
    • 001 Module Introduction
    • 002 Adding an Alert Modal Component
    • 003 Understanding the Different Approaches
    • 004 Using ngIf
    • 005 Preparing Programmatic Creation
    • 006 Creating a Component Programmatically
    • 007 Understanding entryComponents
    • 008 Data Binding _ Event Binding
    • 009 Wrap Up
    • 010, thiếu video và phiên âm bổ sung sau
  • 22 Angular Modules _ Optimizing Angular Apps
    • 001 Module Introduction
    • 002 What are Modules
    • 003 Analyzing the AppModule
    • 004 Getting Started with Feature Modules
    • 005 Splitting Modules Correctly
    • 006 Adding Routes to Feature Modules
    • 007 Component Declarations
    • 008 The ShoppingList Feature Module
    • 009 Understanding Shared Modules
    • 010 Understanding the Core Module
    • 011 Adding an Auth Feature Module
    • 012 Understanding Lazy Loading
    • 013 Implementing Lazy Loading
    • 014 More Lazy Loading
    • 015 Preloading Lazy-Loaded Code
    • 016 Modules _ Services
    • 017 Loading Services Differently
    • 018 Useful Resources _ Links
  • 23 Deploying an Angular App
    • 001 Module Introduction
    • 002 Deployment Preparation _ Steps
    • 003 Using Environment Variables
    • 004 Deploying Angular Applications
    • 005 Deployment Example Firebase Hosting
  • 24 Preview Standalone Components
    • 001 Module Introduction
    • 002 Starting Setup _ Why We Want Standalone Components
    • 003 Building a First Standalone Component
    • 004 Standalone Directives _ Connecting Building Blocks
    • 005 Migrating Another Component
    • 006 A Standalone Root Component
    • 007 Services _ Standalone Components
    • 008 Routing with Standalone Components
    • 009 Lazy Loading
    • 010 Summary
  • 25 Bonus Working with NgRx in our Project
    • 001 Module Introduction
    • 002 What is Application State
    • 003 What is NgRx
    • 004 Getting Started with Reducers
    • 005 Adding Logic to the Reducer
    • 006 Understanding _ Adding Actions
    • 007 Setting Up the NgRx Store
    • 008 Selecting State
    • 009 Dispatching Actions
    • 010 Multiple Actions
    • 011 Preparing Update _ Delete Actions
    • 012 Updating & Deleting Ingredients
    • 013 Expanding the State
    • 014 Managing More State via NgRx
    • 015 Removing Redundant Component State Management
    • 016 First Summary _ Clean Up
    • 017 One Root State
    • 018 Setting Up Auth Reducer _ Actions
    • 019 Dispatching Auth Actions
    • 020 Auth Finished (For Now...).mp4
    • 021 And Important Note on Actions
    • 022 Exploring NgRx Effects
    • 023 Defining the First Effect
    • 024 Effects _ Error Handling
    • 025 Login via NgRx Effects
    • 026 Managing UI State in NgRx
    • 027 Finishing the Login Effect
    • 028 Preparing Other Auth Actions
    • 029 Adding Signup
    • 030 Further Auth Effects
    • 031 Adding Auto-Login with NgRx
    • 032 Adding Auto-Logout
    • 033 Finishing the Auth Effects
    • 034 Using the Store Devtools
    • 035 The Router Store
    • 036 Getting Started with NgRx for Recipes
    • 037 Fetching Recipe Detail Data
    • 038 Fetching Recipes _ Using the Resolver
    • 039 Fixing the Auth Redirect
    • 040 Update, Delete and Add Recipes
    • 041 Storing Recipes via Effects
    • 042 Cleanup Work
    • 043 Wrap Up
    • 044 Alternative NgRx Syntax
    • 045 Useful Resources _ Links
  • 26 Bonus Angular Universal
    • 001 Module Introduction
    • 002 Angular Universal _ ModuleMapLoader
    • 003 Adding Angular Universal
    • 004 Adding Angular Universal with NestJS
    • 005 Deploying Universal Apps
    • 006 Important Remaining Lectures
    • 007 Module Introduction
    • 008 Getting Started with Angular Universal
    • 009 Working on the App Module
    • 010 Adding a Server-Side Build Workflow
    • 011 Adding a NodeJS Server
    • 012 Pre-Rendering the App on the Server
    • 013 Next Steps
    • 014 Angular Universal Gotchas
  • 27 Angular Animations
    • 001 Making Animations Work with Angular 4+
    • 002 Introduction
    • 003 Setting up the Starting Project
    • 004 Animations Triggers and State
    • 005 Switching between States
    • 006 Transitions
    • 007 Advanced Transitions
    • 008 Transition Phases
    • 009 The void State
    • 010 Using Keyframes for Animations
    • 011 Grouping Transitions
    • 012 Using Animation Callbacks
  • 28 Adding Offline Capabilities with Service Workers
    • 001 Module Introduction
    • 002 Adding Service Workers
    • 003 Caching Assets for Offline Use
    • 004 Caching Dynamic Assets _ URLs
    • 005 Further Links _ Resources
  • 29 A Basic Introduction to Unit Testing in Angular Apps
    • 002 Introduction
    • 003 Why Unit Tests
    • 004 Analyzing the Testing Setup (as created by the CLI)
    • 005 Running Tests (with the CLI)
    • 006 Adding a Component and some fitting Tests
    • 007 Testing Dependencies Components and Services
    • 008 Simulating Async Tasks
    • 009 Using fakeAsync and tick
    • 010 Isolated vs Non-Isolated Tests
    • 011 Further Resources _ Where to Go Next
  • 30 Angular as a Platform _ Closer Look at the CLI
    • 001 Module Introduction
    • 002 A Closer Look at ng new
    • 003 IDE _ Project Setup
    • 004 Understanding the Config Files
    • 005 Important CLI Commands
    • 006 The angular.json File - A Closer Look
    • 007 Angular Schematics - An Introduction
    • 008 The ng add Command
    • 009 Using Custom ng generate Schematics
    • 010 Smooth Updating of Projects with ng update.mp4
    • 011 Simplified Deployment with ng deploy
    • 012 Understanding Differential Loading
    • 013 Managing Multiple Projects in One Folder
    • 014 Angular Libraries - An Introduction
    • 015 Wrap Up
  • 31 Angular Changes _ New Features
    • 001 A First Look At Angular Elements
  • 32 Course Roundup
    • 001 Thanks for being part of the course!
    • 002 Bonus More Content!
  • 33 Bonus TypeScript Introduction (for Angular 2 Usage)
    • 001 Module Introduction
    • 002 What _ Why.mp4
    • 003 Installing _ Using TypeScript
    • 004 Base Types _ Primitives
    • 005 Array _ Object Types
    • 006 Type Inference
    • 007 Working with Union Types
    • 008 Assigning Type Aliases
    • 009 Diving into Functions _ Function Types
    • 010 Understanding Generics
    • 011 Classes _ TypeScript
    • 012 Working with Interfaces
    • 013 Configuring the TypeScript Compiler
    • 014 Module Resources