Angular - The Complete Guide [2021 Edition]

Table of contents

1. Chapter 1 : Getting Started
   1. Course Introduction
   2. What is Angular?
   3. Angular Versus Angular 2 Versus Latest Angular Version
   4. Setting Up the Project and First Application
   5. Editing the First Application
   6. Course Structure
   7. Getting the Most Out of the Course
   8. What is TypeScript?
   9. Setting Up a Basic Project Using Bootstrap for Styling
2. Chapter 2 : The Basics
   1. Module Introduction
   2. Loading and Starting an Angular Application
   3. Important Components
   4. Creating a New Component
   5. Understanding the Role of AppModule and Component Declaration
   6. Using Custom Components
   7. Creating Components with the Command Line Input (CLI) and Nesting Components
   8. Working with Component Templates
   9. Working with Component Styles
   10. Understanding the Component Selector
   11. Assignment Solution
   12. What is Data Binding?
   13. String Interpolation
   14. Property Binding
   15. Property Binding Versus String Interpolation
   16. Event Binding
   17. Passing and Using Data with Event Binding
   18. Two-Way Data Binding
   19. Combining All Forms of Data Binding
   20. Assignment Solution
   21. Understanding Directives
   22. Using the ngIf Directive to Display Data Conditionally
   23. Enhancing the ngIf Directive with an Else Condition
   24. Styling Elements Dynamically with the ngStyle Directive
   25. Applying CSS Classes Dynamically with the ngClass Directive
   26. Displaying Lists Using the ngFor Directive
   27. Assignment Solution
   28. Getting the Index When Using the ngFor Directive
3. Chapter 3 : Course Project - the Basics
   1. Project Introduction
   2. Planning the Application
   3. Setting Up the Application
   4. Creating Components
   5. Using Components
   6. Adding a Navigation Bar
   7. Creating a "Recipe" Model
   8. Adding Content to the Recipes' Components
   9. Displaying a List of Recipes Using the ngFor Directive
   10. Displaying Recipe Details
   11. Working on the ShoppingList Component
   12. Creating an "Ingredients" Model
   13. Creating and Displaying the Shopping List
   14. Adding a Shopping List Edit Section
   15. Wrapping Up and Next Steps
4. Chapter 4 : Debugging
   1. Understanding Angular Error Messages
   2. Debugging Code in the Browser Using Source Maps
   3. Using the Augury Plug-In for Diving into Angular Applications
5. Chapter 5 : Components and Databinding Deep Dive
   1. Module Introduction
   2. Splitting Applications into Components
   3. Property and Event Binding Overview
   4. Binding to Custom Properties
   5. Assigning an Alias to Custom Properties
   6. Binding to Custom Events
   7. Assigning an Alias to Custom Events
   8. Custom Property and Event Binding Summary
   9. Understanding View Encapsulation
   10. More on View Encapsulation
   11. Using Local References in Templates
   12. Getting Access to the Template and Document Object Model (DOM) with the @ViewChild Component
   13. Projecting Content into Components with ng-content
   14. Understanding the Component Lifecycle
   15. Seeing Lifecycle Hooks in Action
   16. Lifecycle Hooks and Template Access
   17. Getting Access to ng-content with the @ContentChild Parameter Decorator
   18. Wrapping Up
   19. Assignment Solution
6. Chapter 6 : Course Project - Components and Data Binding
   1. Introduction
   2. Adding Navigation with Event Binding and the ngIf Directive
   3. Passing Recipe Data with Property Binding
   4. Passing Data with Event and Property Binding (Combined)
   5. Allowing the User to Add Ingredients to the Shopping List
7. Chapter 7 : Directives Deep Dive
   1. Module Introduction
   2. ngFor and ngIf Directives Recap
   3. ngClass and ngStyle Recap
   4. Creating a Basic Attribute Directive
   5. Using the Renderer to Build a Better Attribute Directive
   6. Using the @HostListener() Decorator to Listen to Host Events
   7. Using the @HostBinding() Decorator to Bind to Host Properties
   8. Binding to Directive Properties
   9. What Happens Behind the Scenes on Structural Directives
   10. Building a Structural Directive
   11. Understanding the ngSwitch Directive
8. Chapter 8 : Course Project – Directives
   1. Building and Using a Dropdown Directive
9. Chapter 9 : Using Services and Dependency Injection
   1. Module Introduction
   2. Why would You Need Services?
   3. Creating a Logging Service
   4. Injecting the Logging Service into Components
   5. Creating a Data Service
   6. Understanding the Hierarchical Injector
   7. How Many Instances of Service are Required?
   8. Injecting Services into Other Services
   9. Using Services for Cross-component Communication
   10. Assignment Solution
10. Chapter 10 : Course Project - Services and Dependency Injection
    1. Introduction
    2. Setting Up the Services
    3. Managing Recipes in a Recipe Service
    4. Using a Service for Cross-Component Communication
    5. Adding the Shopping List Service
    6. Using Services for Pushing Data from A to B
    7. Adding Ingredients to Recipes
    8. Passing Ingredients from Recipes to the Shopping List (Through a Service)
11. Chapter 11 : Changing Pages with Routing
    1. Module Introduction
    2. Why do We Need a Router?
    3. Setting Up and Loading Routes
    4. Navigating with Router Links
    5. Understanding Navigation Paths
    6. Styling Active Router Links
    7. Navigating Programmatically
    8. Using Relative Paths in Programmatic Navigation
    9. Passing Parameters to Routes
    10. Fetching Route Parameters
    11. Fetching Route Parameters Reactively
    12. An Important Note about Route Observables
    13. Passing Query Parameters and Fragments
    14. Retrieving Query Parameters and Fragments
    15. Some Common Gotchas
    16. Setting Up Child (Nested) Routes
    17. Using Query Parameters – Practice
    18. Configuring the Handling of Query Parameters
    19. Redirecting and Wildcard Routes
    20. Outsourcing the Route Configuration
    21. An Introduction to Guards
    22. Protecting Routes with the canActivate() Method
    23. Protecting Child (Nested) Routes Using the canActivateChild() Method
    24. Using a Fake Authentication Service
    25. Controlling Navigation with the canDeactivate() Method
    26. Passing Static Data to a Route
    27. Resolving Dynamic Data with the Resolve Guard
    28. Understanding Location Strategies
    29. Wrapping Up
12. Chapter 12 : Course Project – Routing
    1. Planning the General Structure
    2. Setting Up Routes
    3. Adding Navigation to the Application
    4. Marking Active Routes
    5. Fixing Page Reload Issues
    6. Child Routes: Challenge
    7. Adding Child Routing Together
    8. Configuring Route Parameters
    9. Passing Dynamic Parameters to Links
    10. Styling Active Recipe Items
    11. Adding Editing Routes
    12. Retrieving Route Parameters
    13. Programmatic Navigation to the Edit Page
    14. One Note about Route Observables
13. Chapter 13 : Understanding Observables
    1. Module Introduction
    2. Analyzing Angular Observables
    3. Getting Closer to the Core of Observables
    4. Building a Custom Observable
    5. Errors and Completion
    6. Observables
    7. Understanding Operators
    8. Subjects
    9. Wrapping Up
14. Chapter 14 : Course Project – Observables
    1. Improving the Reactive Service with Observables (Subjects)
15. Chapter 15 : Handling Forms in Angular Apps
    1. Module Introduction
    2. Why do We Need Angular's Help?
    3. Template-Driven (TD) Versus Reactive Approach
    4. Creating an Example Form
    5. Template-Driven (TD): Creating Forms and Registering the Controls
    6. Template-Driven (TD): Submitting and Using a Form
    7. Template-Driven (TD): Understanding Form State
    8. Template-Driven (TD): Accessing a Form Using the @ViewChild Decorator
    9. Template-Driven (TD): Adding Validation to Check User Input
    10. Template-Driven (TD): Using the Form State
    11. Template-Driven (TD): Displaying Validation Error Messages
    12. Template-Driven (TD): Set Default Values Using the ngModel Property Binding
    13. Template-Driven (TD): Using ngModel with Two-Way Binding
    14. Template-Driven (TD): Grouping Form Controls
    15. Template-Driven (TD): Handling Radio Buttons
    16. Template-Driven (TD): Setting and Patching Form Values
    17. Template-Driven (TD): Using Form Data
    18. Template-Driven (TD): Resetting Forms
    19. Introduction to the Reactive Approach
    20. Reactive: Form Template Setup
    21. Reactive: Creating a Form in Code
    22. Reactive: Syncing HTML and Form
    23. Reactive: Submitting a Form
    24. Reactive: Adding Validation
    25. Reactive: Getting Access to Controls
    26. Reactive: Grouping Controls
    27. Reactive: Arrays of FormControl (FormArray)
    28. Reactive: Creating Custom Validators
    29. Reactive: Using Error Codes
    30. Reactive: Creating a Custom Asynchronous Validator
    31. Reactive: Reacting to Status or Value Changes
    32. Reactive: Setting and Patching Values
    33. Assignment Solution
16. Chapter 16 : Course Project – Forms
    1. Introduction
    2. TD: Adding the Shopping List Form
    3. Adding Validation to a Form
    4. Allowing Selection of Items in a List
    5. Loading Shopping List Items into a Form
    6. Updating Existing Items
    7. Resetting a Form
    8. Allowing the User to Clear (Cancel) a Form
    9. Allowing the Deletion of Shopping List Items
    10. Creating a Template for the (Reactive) Recipe Edit Form
    11. Creating a Form to Edit Recipes
    12. Syncing HTML with a Form
    13. Adding Ingredient Controls to a FormArray
    14. Adding New Ingredient Controls
    15. Validating User Input
    16. Submitting the Recipe Edit Form
    17. Adding the Delete and Clear (Cancel) Functionality
    18. Redirecting a User (After Deleting a Recipe)
    19. Adding an Image Preview
    20. Providing the Recipe Service Correctly
    21. Deleting Ingredients and Some Finishing Touches
17. Chapter 17 : Using Pipes to Transform the Output
    1. Introduction and Why Pipes are Useful
    2. Using Pipes
    3. Parametrizing Pipes
    4. Learning More About Pipes
    5. Chaining Multiple Pipes
    6. Creating a Custom Pipe
    7. Parametrizing a Custom Pipe
    8. Example: Creating a Filter Pipe
    9. Pure and Impure Pipes (or: How to "Fix" the Filter Pipe?)
    10. Understanding the "Async" Pipe
18. Chapter 18 : Making HTTP Requests
    1. A New Integrated Development Environment (IDE)
    2. Module Introduction
    3. How does Angular Interact with Backends?
    4. Anatomy of an HTTP Request
    5. Setting Up Backend (Firebase)
    6. Sending a POST Request
    7. Sending a GET Request
    8. Using Reactive Extensions for JavaScript (RxJS) Operators to Transform Response Data
    9. Using Types with HttpClient
    10. Outputting Posts
    11. Showing a Loading Indicator
    12. Using a Service for HTTP Requests
    13. Working of Services and Components
    14. Sending a DELETE Request
    15. Handling Errors
    16. Using Subjects for Error Handling
    17. Using the catchError Operator
    18. Error Handling and User Experience (UX)
    19. Setting Headers
    20. Adding Query Parameters
    21. Observing Different Types of Responses
    22. Changing the Response Body Type
    23. Introducing Interceptors
    24. Manipulating Request Objects
    25. Response Interceptors
    26. Multiple Interceptors
    27. Wrapping Up
19. Chapter 19 : Course Project – HTTP
    1. Module Introduction
    2. Setting Up Backend (Firebase)
    3. Setting Up the Data Storage Service
    4. Storing Recipes
    5. Fetching Recipes
    6. Transforming Response Data
    7. Resolving Data before Loading
    8. Fixing a Bug with the Resolver
20. Chapter 20 : Authentication and Route Protection in Angular Apps
    1. Module Introduction
    2. Working of Authentication
    3. Adding the Authentication Page
    4. Switching between Authentication Modes
    5. Handling Form Input
    6. Preparing the Backend
    7. Preparing the Signup Request
    8. Sending the Signup Request
    9. Adding Loading Spinner and Error Handling Logic
    10. Improving Error Handling
    11. Sending Login Requests
    12. Handling Login Error
    13. Creating and Storing the User Data
    14. Reflecting the Authentication State in the User Interface (UI)
    15. Adding a Token to Outgoing Requests
    16. Attaching a Token with an Interceptor
    17. Adding Logout
    18. Adding Auto-Login
    19. Adding Auto-Logout
    20. Adding an Authentication Guard
    21. Wrapping Up
21. Chapter 21 : Dynamic Components
    1. Module Introduction
    2. Adding an Alert Modal Component
    3. Understanding the Different Approaches
    4. Using the ngIf Directive
    5. Preparing Programmatic Creation
    6. Creating a Component Programmatically
    7. Understanding entryComponents
    8. Data Binding and Event Binding
    9. Wrapping Up
22. Chapter 22 : Angular Modules and Optimizing Angular Applications
    1. Module Introduction
    2. What are Modules?
    3. Analyzing the AppModule Class
    4. Getting Started with Feature Modules
    5. Splitting Modules Correctly
    6. Adding Routes to Feature Modules
    7. Component Declarations
    8. ShoppingList Feature Module
    9. Understanding Shared Modules
    10. Understanding Core Modules
    11. Adding an Authentication Feature Module
    12. Understanding Lazy Loading
    13. Implementing Lazy Loading
    14. More Lazy Loading
    15. Preloading Lazy-Loaded Code
    16. Modules and Services
    17. Loading Services Differently
    18. Ahead-of-time (AOT) Compilation
    19. Wrapping Up
23. Chapter 23 : Deploying an Angular Application
    1. Module Introduction
    2. Deployment Preparations and Important Steps
    3. Using Environment Variables
    4. Deployment Example: Firebase Hosting
24. Chapter 24 : Bonus: Working with NgRx in Our Project
    1. Module Introduction
    2. What is Application State?
    3. What is NgRx?
    4. Getting Started with Reducers
    5. Adding Logic to the Reducer
    6. Understanding and Adding Actions
    7. Setting Up the NgRx Store
    8. Selecting State
    9. Dispatching Actions
    10. Multiple Actions
    11. Preparing Update and Delete Actions
    12. Updating and Deleting Ingredients
    13. Expanding State
    14. Managing More States Using NgRx
    15. Removing Redundant Component State Management
    16. First Summary and Cleanup
    17. One Root State
    18. Setting Up Authentication Reducer and Actions
    19. Dispatching Authentication Actions
    20. Authentication Finished
    21. Important Note on Actions
    22. Exploring NgRx Effects
    23. Defining the First Effect
    24. Effects and Error Handling
    25. Logging in through NgRx Effects
    26. Managing User Interface (UI) State in NgRx
    27. Finishing the Login Effect
    28. Preparing Other Authentication Actions
    29. Adding Signup
    30. Further Authentication Effects
    31. Adding Auto-Login with NgRx
    32. Adding Auto-Logout
    33. Finishing Authentication Effects
    34. Using the Store DevTools
    35. The Router Store
    36. Getting Started with NgRx for Recipes
    37. Fetching Recipe Detail Data
    38. Fetching Recipes and Using the Resolver
    39. Fixing Authentication Redirect
    40. Updating, Deleting, and Adding Recipes
    41. Storing Recipes Using Effects
    42. Cleanup Work
    43. Wrapping Up
25. Chapter 25 : Bonus: Angular Universal
    1. Module Introduction
    2. Adding Angular Universal
    3. Adding Angular Universal with NestJS
    4. Adding a Server-side Build Workflow
    5. Adding a NodeJS Server
    6. Pre-rendering an Application on the Server
    7. Next Steps
26. Chapter 26 : Angular Animations
    1. Introduction
    2. Setting Up the Starting Project
    3. Animation Triggers and State
    4. Switching between States
    5. Transitions
    6. Advanced Transitions
    7. Transition Phases
    8. The "Void" State
    9. Using Keyframes for Animations
    10. Grouping Transitions
    11. Using Animation Callbacks
27. Chapter 27 : Adding Offline Capabilities with Service Workers
    1. Module Introduction
    2. Adding Service Workers
    3. Caching Assets for Offline Use
    4. Caching Dynamic Assets and URLs
28. Chapter 28 : A Basic Introduction to Unit Testing in Angular Apps
    1. Introduction
    2. Why Unit Tests?
    3. Analyzing the Testing Setup (as Created by the Command Line Interface (CLI))
    4. Running Tests (with the Command Line Interface (CLI))
    5. Adding a Component and Some Fitting Tests
    6. Testing Dependencies: Components and Services
    7. Simulating Asynchronous Tasks
    8. Using "fakeAsync" and "Tick"
    9. Isolated versus Non-isolated Tests
29. Chapter 29 : Angular as a Platform and Closer Look at the Command Line Interface (CLI)
    1. Module Introduction
    2. A Closer Look at the "ng new" Command
    3. Integrated Development Environment (IDE) and Project Setup
    4. Understanding the Configuration Files
    5. Important Command Line Interface (CLI) Commands
    6. The "angular.json" File - a Closer Look
    7. Angular Schematics - an Introduction
    8. The "ng add" Command
    9. Using Custom "ng generate" Schematics
    10. Updating Projects Using the "ng update" Command
    11. Deploying with the "ng deploy" Command
    12. Understanding "Differential Loading"
    13. Managing Multiple Projects in One Folder
    14. Angular Libraries - an Introduction
    15. Wrapping Up
30. Chapter 30 : Angular Changes and New Features
    1. First Look at Angular Elements
31. Chapter 31 : Course Roundup
    1. Course Roundup