Angular - The Complete Guide [2021 Edition]

Table of Contents

Chapter 1 : Getting Started

Course Introduction

What is Angular?

Angular Versus Angular 2 Versus Latest Angular Version

Setting Up the Project and First Application

Editing the First Application

Course Structure

Getting the Most Out of the Course

What is TypeScript?

Setting Up a Basic Project Using Bootstrap for Styling

Chapter 2 : The Basics

Module Introduction

Loading and Starting an Angular Application

Important Components

Creating a New Component

Understanding the Role of AppModule and Component Declaration

Using Custom Components

Creating Components with the Command Line Input (CLI) and Nesting Components

Working with Component Templates

Working with Component Styles

Understanding the Component Selector

Assignment Solution

What is Data Binding?

String Interpolation

Property Binding

Property Binding Versus String Interpolation

Event Binding

Passing and Using Data with Event Binding

Two-Way Data Binding

Combining All Forms of Data Binding

Assignment Solution

Understanding Directives

Using the ngIf Directive to Display Data Conditionally

Enhancing the ngIf Directive with an Else Condition

Styling Elements Dynamically with the ngStyle Directive

Applying CSS Classes Dynamically with the ngClass Directive

Displaying Lists Using the ngFor Directive

Assignment Solution

Getting the Index When Using the ngFor Directive

Chapter 3 : Course Project - the Basics

Project Introduction

Planning the Application

Setting Up the Application

Creating Components

Using Components

Adding a Navigation Bar

Creating a “Recipe” Model

Adding Content to the Recipes’ Components

Displaying a List of Recipes Using the ngFor Directive

Displaying Recipe Details

Working on the ShoppingList Component

Creating an “Ingredients” Model

Creating and Displaying the Shopping List

Adding a Shopping List Edit Section

Wrapping Up and Next Steps

Chapter 4 : Debugging

Understanding Angular Error Messages

Debugging Code in the Browser Using Source Maps

Using the Augury Plug-In for Diving into Angular Applications

Chapter 5 : Components and Databinding Deep Dive

Module Introduction

Splitting Applications into Components

Property and Event Binding Overview

Binding to Custom Properties

Assigning an Alias to Custom Properties

Binding to Custom Events

Assigning an Alias to Custom Events

Custom Property and Event Binding Summary

Understanding View Encapsulation

More on View Encapsulation

Using Local References in Templates

Getting Access to the Template and Document Object Model (DOM) with the @ViewChild Component

Projecting Content into Components with ng-content

Understanding the Component Lifecycle

Seeing Lifecycle Hooks in Action

Lifecycle Hooks and Template Access

Getting Access to ng-content with the @ContentChild Parameter Decorator

Wrapping Up

Assignment Solution

Chapter 6 : Course Project - Components and Data Binding

Introduction

Adding Navigation with Event Binding and the ngIf Directive

Passing Recipe Data with Property Binding

Passing Data with Event and Property Binding (Combined)

Allowing the User to Add Ingredients to the Shopping List

Chapter 7 : Directives Deep Dive

Module Introduction

ngFor and ngIf Directives Recap

ngClass and ngStyle Recap

Creating a Basic Attribute Directive

Using the Renderer to Build a Better Attribute Directive

Using the @HostListener() Decorator to Listen to Host Events

Using the @HostBinding() Decorator to Bind to Host Properties

Binding to Directive Properties

What Happens Behind the Scenes on Structural Directives

Building a Structural Directive

Understanding the ngSwitch Directive

Chapter 8 : Course Project – Directives

Building and Using a Dropdown Directive

Chapter 9 : Using Services and Dependency Injection

Module Introduction

Why would You Need Services?

Creating a Logging Service

Injecting the Logging Service into Components

Creating a Data Service

Understanding the Hierarchical Injector

How Many Instances of Service are Required?

Injecting Services into Other Services

Using Services for Cross-component Communication

Assignment Solution

Chapter 10 : Course Project - Services and Dependency Injection

Introduction

Setting Up the Services

Managing Recipes in a Recipe Service

Using a Service for Cross-Component Communication

Adding the Shopping List Service

Using Services for Pushing Data from A to B

Adding Ingredients to Recipes

Passing Ingredients from Recipes to the Shopping List (Through a Service)

Chapter 11 : Changing Pages with Routing

Module Introduction

Why do We Need a Router?

Setting Up and Loading Routes

Navigating with Router Links

Understanding Navigation Paths

Styling Active Router Links

Navigating Programmatically

Using Relative Paths in Programmatic Navigation

Passing Parameters to Routes

Fetching Route Parameters

Fetching Route Parameters Reactively

An Important Note about Route Observables

Passing Query Parameters and Fragments

Retrieving Query Parameters and Fragments

Some Common Gotchas

Setting Up Child (Nested) Routes

Using Query Parameters – Practice

Configuring the Handling of Query Parameters

Redirecting and Wildcard Routes

Outsourcing the Route Configuration

An Introduction to Guards

Protecting Routes with the canActivate() Method

Protecting Child (Nested) Routes Using the canActivateChild() Method

Using a Fake Authentication Service

Controlling Navigation with the canDeactivate() Method

Passing Static Data to a Route

Resolving Dynamic Data with the Resolve Guard

Understanding Location Strategies

Wrapping Up

Chapter 12 : Course Project – Routing

Planning the General Structure

Setting Up Routes

Adding Navigation to the Application

Marking Active Routes

Fixing Page Reload Issues

Child Routes: Challenge

Adding Child Routing Together

Configuring Route Parameters

Passing Dynamic Parameters to Links

Styling Active Recipe Items

Adding Editing Routes

Retrieving Route Parameters

Programmatic Navigation to the Edit Page

One Note about Route Observables

Chapter 13 : Understanding Observables

Module Introduction

Analyzing Angular Observables

Getting Closer to the Core of Observables

Building a Custom Observable

Errors and Completion

Observables

Understanding Operators

Subjects

Wrapping Up

Chapter 14 : Course Project – Observables

Improving the Reactive Service with Observables (Subjects)

Chapter 15 : Handling Forms in Angular Apps

Module Introduction

Why do We Need Angular’s Help?

Template-Driven (TD) Versus Reactive Approach

Creating an Example Form

Template-Driven (TD): Creating Forms and Registering the Controls

Template-Driven (TD): Submitting and Using a Form

Template-Driven (TD): Understanding Form State

Template-Driven (TD): Accessing a Form Using the @ViewChild Decorator

Template-Driven (TD): Adding Validation to Check User Input

Template-Driven (TD): Using the Form State

Template-Driven (TD): Displaying Validation Error Messages

Template-Driven (TD): Set Default Values Using the ngModel Property Binding

Template-Driven (TD): Using ngModel with Two-Way Binding

Template-Driven (TD): Grouping Form Controls

Template-Driven (TD): Handling Radio Buttons

Template-Driven (TD): Setting and Patching Form Values

Template-Driven (TD): Using Form Data

Template-Driven (TD): Resetting Forms

Introduction to the Reactive Approach

Reactive: Form Template Setup

Reactive: Creating a Form in Code

Reactive: Syncing HTML and Form

Reactive: Submitting a Form

Reactive: Adding Validation

Reactive: Getting Access to Controls

Reactive: Grouping Controls

Reactive: Arrays of FormControl (FormArray)

Reactive: Creating Custom Validators

Reactive: Using Error Codes

Reactive: Creating a Custom Asynchronous Validator

Reactive: Reacting to Status or Value Changes

Reactive: Setting and Patching Values

Assignment Solution

Chapter 16 : Course Project – Forms

Introduction

TD: Adding the Shopping List Form

Adding Validation to a Form

Allowing Selection of Items in a List

Loading Shopping List Items into a Form

Updating Existing Items

Resetting a Form

Allowing the User to Clear (Cancel) a Form

Allowing the Deletion of Shopping List Items

Creating a Template for the (Reactive) Recipe Edit Form

Creating a Form to Edit Recipes

Syncing HTML with a Form

Adding Ingredient Controls to a FormArray

Adding New Ingredient Controls

Validating User Input

Submitting the Recipe Edit Form

Adding the Delete and Clear (Cancel) Functionality

Redirecting a User (After Deleting a Recipe)

Adding an Image Preview

Providing the Recipe Service Correctly

Deleting Ingredients and Some Finishing Touches

Chapter 17 : Using Pipes to Transform the Output

Introduction and Why Pipes are Useful

Using Pipes

Parametrizing Pipes

Learning More About Pipes

Chaining Multiple Pipes

Creating a Custom Pipe

Parametrizing a Custom Pipe

Example: Creating a Filter Pipe

Pure and Impure Pipes (or: How to “Fix” the Filter Pipe?)

Understanding the “Async” Pipe

Chapter 18 : Making HTTP Requests

A New Integrated Development Environment (IDE)

Module Introduction

How does Angular Interact with Backends?

Anatomy of an HTTP Request

Setting Up Backend (Firebase)

Sending a POST Request

Sending a GET Request

Using Reactive Extensions for JavaScript (RxJS) Operators to Transform Response Data

Using Types with HttpClient

Outputting Posts

Showing a Loading Indicator

Using a Service for HTTP Requests

Working of Services and Components

Sending a DELETE Request

Handling Errors

Using Subjects for Error Handling

Using the catchError Operator

Error Handling and User Experience (UX)

Setting Headers

Adding Query Parameters

Observing Different Types of Responses

Changing the Response Body Type

Introducing Interceptors

Manipulating Request Objects

Response Interceptors

Multiple Interceptors

Wrapping Up

Chapter 19 : Course Project – HTTP

Module Introduction

Setting Up Backend (Firebase)

Setting Up the Data Storage Service

Storing Recipes

Fetching Recipes

Transforming Response Data

Resolving Data before Loading

Fixing a Bug with the Resolver

Chapter 20 : Authentication and Route Protection in Angular Apps

Module Introduction

Working of Authentication

Adding the Authentication Page

Switching between Authentication Modes

Handling Form Input

Preparing the Backend

Preparing the Signup Request

Sending the Signup Request

Adding Loading Spinner and Error Handling Logic

Improving Error Handling

Sending Login Requests

Handling Login Error

Creating and Storing the User Data

Reflecting the Authentication State in the User Interface (UI)

Adding a Token to Outgoing Requests

Attaching a Token with an Interceptor

Adding Logout

Adding Auto-Login

Adding Auto-Logout

Adding an Authentication Guard

Wrapping Up

Chapter 21 : Dynamic Components

Module Introduction

Adding an Alert Modal Component

Understanding the Different Approaches

Using the ngIf Directive

Preparing Programmatic Creation

Creating a Component Programmatically

Understanding entryComponents

Data Binding and Event Binding

Wrapping Up

Chapter 22 : Angular Modules and Optimizing Angular Applications

Module Introduction

What are Modules?

Analyzing the AppModule Class

Getting Started with Feature Modules

Splitting Modules Correctly

Adding Routes to Feature Modules

Component Declarations

ShoppingList Feature Module

Understanding Shared Modules

Understanding Core Modules

Adding an Authentication Feature Module

Understanding Lazy Loading

Implementing Lazy Loading

More Lazy Loading

Preloading Lazy-Loaded Code

Modules and Services

Loading Services Differently

Ahead-of-time (AOT) Compilation

Wrapping Up

Chapter 23 : Deploying an Angular Application

Module Introduction

Deployment Preparations and Important Steps

Using Environment Variables

Deployment Example: Firebase Hosting

Chapter 24 : Bonus: Working with NgRx in Our Project

Module Introduction

What is Application State?

What is NgRx?

Getting Started with Reducers

Adding Logic to the Reducer

Understanding and Adding Actions

Setting Up the NgRx Store

Selecting State

Dispatching Actions

Multiple Actions

Preparing Update and Delete Actions

Updating and Deleting Ingredients

Expanding State

Managing More States Using NgRx

Removing Redundant Component State Management

First Summary and Cleanup

One Root State

Setting Up Authentication Reducer and Actions

Dispatching Authentication Actions

Authentication Finished

Important Note on Actions

Exploring NgRx Effects

Defining the First Effect

Effects and Error Handling

Logging in through NgRx Effects

Managing User Interface (UI) State in NgRx

Finishing the Login Effect

Preparing Other Authentication Actions

Adding Signup

Further Authentication Effects

Adding Auto-Login with NgRx

Adding Auto-Logout

Finishing Authentication Effects

Using the Store DevTools

The Router Store

Getting Started with NgRx for Recipes

Fetching Recipe Detail Data

Fetching Recipes and Using the Resolver

Fixing Authentication Redirect

Updating, Deleting, and Adding Recipes

Storing Recipes Using Effects

Cleanup Work

Wrapping Up

Chapter 25 : Bonus: Angular Universal

Module Introduction

Adding Angular Universal

Adding Angular Universal with NestJS

Adding a Server-side Build Workflow

Adding a NodeJS Server

Pre-rendering an Application on the Server

Next Steps

Chapter 26 : Angular Animations

Introduction

Setting Up the Starting Project

Animation Triggers and State

Switching between States

Transitions

Advanced Transitions

Transition Phases

The “Void” State

Using Keyframes for Animations

Grouping Transitions

Using Animation Callbacks

Chapter 27 : Adding Offline Capabilities with Service Workers

Module Introduction

Adding Service Workers

Caching Assets for Offline Use

Caching Dynamic Assets and URLs

Chapter 28 : A Basic Introduction to Unit Testing in Angular Apps

Introduction

Why Unit Tests?

Analyzing the Testing Setup (as Created by the Command Line Interface (CLI))

Running Tests (with the Command Line Interface (CLI))

Adding a Component and Some Fitting Tests

Testing Dependencies: Components and Services

Simulating Asynchronous Tasks

Using “fakeAsync” and “Tick”

Isolated versus Non-isolated Tests

Chapter 29 : Angular as a Platform and Closer Look at the Command Line Interface (CLI)

Module Introduction

A Closer Look at the “ng new” Command

Integrated Development Environment (IDE) and Project Setup

Understanding the Configuration Files

Important Command Line Interface (CLI) Commands

The “angular.json” File - a Closer Look

Angular Schematics - an Introduction

The “ng add” Command

Using Custom “ng generate” Schematics

Updating Projects Using the “ng update” Command

Deploying with the “ng deploy” Command

Understanding “Differential Loading”

Managing Multiple Projects in One Folder

Angular Libraries - an Introduction

Wrapping Up

Chapter 30 : Angular Changes and New Features

First Look at Angular Elements

Chapter 31 : Course Roundup

Course Roundup