Angular 8 - The Complete Guide 

Course Introduction

Course Introduction

What is Angular?

Join our Online Learning Community

Using the CLI

Angular vs Angular 2 vs Angular 9

Angular vs Angular 2 vs Angular 7

CLI Deep Dive & Troubleshooting

Project Setup and First App

Project Setup and First App

Editing the First App

Editing the First App

Project Setup and First App

Editing the First App

The Course Structure

How to get the Most out of the Course

What is TypeScript?

A Basic Project Setup using Bootstrap for Styling

A Basic Project Setup using Bootstrap for Styling

Where to find the Course Source Code

Module Introduction

How an Angular App gets Loaded and Started

Components are Important!

Creating a New Component

Understanding the Role of AppModule and Component Declaration

Using Custom Components

Creating Components with the CLI & Nesting Components

Working with Component Templates

Working with Component Styles

Fully Understanding the Component Selector

[OPTIONAL] Assignment Solution

What is Databinding?

String Interpolation

Property Binding

Property Binding vs String Interpolation

Event Binding

Bindable Properties and Events

Passing and Using Data with Event Binding

Important: FormsModule is Required for Two-Way-Binding!

Two-Way-Databinding

Combining all Forms of Databinding

[OPTIONAL] Assignment Solution

Understanding Directives

Using ngIf to Output Data Conditionally

Enhancing ngIf with an Else Condition

Styling Elements Dynamically with ngStyle

Applying CSS Classes Dynamically with ngClass

Outputting Lists with ngFor

[OPTIONAL] Assignment Solution

Getting the Index when using ngFor

Project Introduction

Planning the App

Installing Bootstrap Correctly

Setting up the Application

Setting up the Application

Creating the Components

Using the Components

Adding a Navigation Bar

Alternative Non-Collapsable Navigation Bar

Creating a "Recipe" Model

Adding Content to the Recipes Components

Outputting a List of Recipes with ngFor

Displaying Recipe Details

Working on the ShoppingListComponent

Creating an "Ingredient" Model

Creating and Outputting the Shopping List

Adding a Shopping List Edit Section

Wrap Up & Next Steps

Understanding Angular Error Messages

Debugging Code in the Browser Using Sourcemaps

Using Augury to Dive into Angular Apps

Module Introduction

Splitting Apps into Components

Property & 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

@ViewChild() in Angular 8+

Getting Access to the Template & DOM with @ViewChild

Projecting Content into Components with ng-content

Understanding the Component Lifecycle

Seeing Lifecycle Hooks in Action

Lifecycle Hooks and Template Access

@ContentChild() in Angular 8+

Getting Access to ng-content with @ContentChild

Wrap Up

[OPTIONAL] Assignment Solution

Introduction

Adding Navigation with Event Binding and ngIf

Passing Recipe Data with Property Binding

Passing Data with Event and Property Binding (Combined)

Make sure you have FormsModule added!

Allowing the User to Add Ingredients to the Shopping List

Module Introduction

ngFor and ngIf Recap

ngClass and ngStyle Recap

Creating a Basic Attribute Directive

Creating a Basic Attribute Directive

Using the Renderer to build a Better Attribute Directive

More about the Renderer

Using HostListener to Listen to Host Events

Using HostBinding to Bind to Host Properties

Binding to Directive Properties

What Happens behind the Scenes on Structural Directives

Building a Structural Directive

Understanding ngSwitch

Building and Using a Dropdown Directive

Closing the Dropdown From Anywhere

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 Should It Be?

Injecting Services into Services

Using Services for Cross-Component Communication

Services in Angular 6+

[OPTIONAL] Assignment Solution

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 (via a Service)

Module Introduction

Why do we need a Router?

Understanding the Example Project

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

Practicing and some Common Gotchas

Setting up Child (Nested) Routes

Using Query Parameters - Practice

Configuring the Handling of Query Parameters

Redirecting and Wildcard Routes

Important: Redirection Path Matching

Outsourcing the Route Configuration

An Introduction to Guards

Protecting Routes with canActivate

Protecting Child (Nested) Routes with canActivateChild

Using a Fake Auth Service

Controlling Navigation with canDeactivate

Passing Static Data to a Route

Resolving Dynamic Data with the resolve Guard

Understanding Location Strategies

Wrap Up

Planning the General Structure

Setting Up Routes

Adding Navigation to the App

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

Project Cleanup

Module Introduction

Analyzing Angular Observables

Getting Closer to the Core of Observables

Building a Custom Observable

Errors & Completion

Observables & You!

Understanding Operators

Subjects

Wrap Up

Useful Resources & Links

Angular 6 & RxJS 6

Analyzing a Built-in Angular Observable

Building & Using a First Simple Observable

Building & Using a Custom Observable from Scratch

Unsubscribe!

Where to learn more

Using Subjects to Pass AND Listen to Data

Understanding Observable Operators

RxJS 6 without rxjs-compat

Wrap Up

Improving the Reactive Service with Observables (Subjects)

Changed the Subscription Name

Module Introduction

Why do we Need Angular's Help?

Template-Driven (TD) vs Reactive Approach

An Example Form

TD: Creating the Form and Registering the Controls

TD: Submitting and Using the Form

TD: Understanding Form State

TD: Accessing the Form with @ViewChild

TD: Adding Validation to check User Input

Built-in Validators & Using HTML5 Validation

TD: Using the Form State

TD: Outputting Validation Error Messages

TD: Set Default Values with ngModel Property Binding

TD: Using ngModel with Two-Way-Binding

TD: Grouping Form Controls

TD: Handling Radio Buttons

TD: Setting and Patching Form Values

TD: Using Form Data

TD: Resetting Forms

[OPTIONAL] Assignment Solution

Introduction to the Reactive Approach

Reactive: Setup

Reactive: Creating a Form in Code

Reactive: Syncing HTML and Form

Reactive: Submitting the Form

Reactive: Adding Validation

Reactive: Getting Access to Controls

Reactive: Grouping Controls

Fixing a Bug

Reactive: Arrays of Form Controls (FormArray)

Reactive: Creating Custom Validators

Reactive: Using Error Codes

Reactive: Creating a Custom Async Validator

Reactive: Reacting to Status or Value Changes

Reactive: Setting and Patching Values

[OPTIONAL] Assignment Solution

Introduction

TD: Adding the Shopping List Form

Adding Validation to the Form

Allowing the Selection of Items in the List

Loading the Shopping List Items into the Form

Updating existing Items

Resetting the Form

Allowing the the User to Clear (Cancel) the Form

Allowing the Deletion of Shopping List Items

Creating the Template for the (Reactive) Recipe Edit Form

Creating the Form For Editing Recipes

Syncing HTML with the Form

Adding Ingredient Controls to a Form Array

Fixing a Bug

Adding Ingredient Controls to a Form Array

Adding new Ingredient Controls

Validating User Input

Submitting the Recipe Edit Form

Adding a Delete and Clear (Cancel) Functionality

Redirecting the User (after Deleting a Recipe)

Adding an Image Preview

Providing the Recipe Service Correctly

Deleting Ingredients and Some Finishing Touches

Deleting all Items in a FormArray

Introduction & Why Pipes are Useful

Using Pipes

Parametrizing Pipes

Where to learn 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

[OPTIONAL] Assignment Solution

A New IDE

Module Introduction

How Does Angular Interact With Backends?

The Anatomy of a Http Request

Backend (Firebase) Setup

Sending a POST Request

GETting Data

Using RxJS Operators to Transform Response Data

Using Types with the HttpClient

Outputting Posts

Showing a Loading Indicator

Using a Service for Http Requests

Services & Components Working Together

Sending a DELETE Request

Handling Errors

Using Subjects for Error Handling

Using the catchError Operator

Error Handling & UX

Setting Headers

Adding Query Params

Observing Different Types of Responses

Changing the Response Body Type

Introducing Interceptors

Manipulating Request Objects

Response Interceptors

Multiple Interceptors

Wrap Up

Useful Resources & Links

Module Introduction

Backend (Firebase) Setup

Setting Up the DataStorage Service

Storing Recipes

Fetching Recipes

Transforming Response Data

Resolving Data Before Loading

Fixing a Bug with the Resolver

MUST READ: Angular 6 and Http

Introduction & How Http Requests Work in SPAs

Firebase & The Right Database

Example App & Backend Setup

Sending Requests (Example: POST Request)

Adjusting Request Headers

Sending GET Requests

Sending a PUT Request

RxJS 6 without rxjs-compat

Transform Responses Easily with Observable Operators (map())

Using the Returned Data

Catching Errors without rxjs-compat

Catching Http Errors

Using the "async" Pipe with Http Requests

Introduction

Setting up Firebase as a Dummy Backend

Sending PUT Requests to Save Data

GETting Back the Recipes

Transforming Response Data to Prevent Errors

Module Introduction

How Authentication Works

Adding the Auth Page

Switching Between Auth Modes

Handling Form Input

Preparing the Backend

Make sure you got Recipes in your backend!

Preparing the Signup Request

Sending the Signup Request

Adding a Loading Spinner & Error Handling Logic

Improving Error Handling

Sending Login Requests

Login Error Handling

Creating & Storing the User Data

Reflecting the Auth State in the UI

Adding the Token to Outgoing Requests

Attaching the Token with an Interceptor

Adding Logout

Adding Auto-Login

Adding Auto-Logout

Adding an Auth Guard

Wrap Up

Useful Resources & Links

Module Introduction

How Authentication Works in Single-Page-Applications

More about JWT

Creating a Signup Page and Route

Setting up the Firebase SDK

Use getIdToken() instead of getToken()

Signing Users Up

Signin Users In

Requiring a Token (on the Backend)

Sending the Token

Checking and Using Authentication Status

Adding a Logout Button

Route Protection and Redirection Example

Wrap Up

Possible Improvements

Module Introduction

Adding an Alert Modal Component

Understanding the Different Approaches

Using ngIf

Preparing Programmatic Creation

Creating a Component Programmatically

Understanding entryComponents

Data Binding & Event Binding

Wrap Up

Useful Resources & Links

Module Introduction

What are Modules?

Analyzing the AppModule

Getting Started with Feature Modules

Splitting Modules Correctly

Adding Routes to Feature Modules

Component Declarations

The ShoppingList Feature Module

Understanding Shared Modules

Understanding the Core Module

Adding an Auth Feature Module

Understanding Lazy Loading

Implementing Lazy Loading

Alternative Lazy Loading Syntax

More Lazy Loading

Preloading Lazy-Loaded Code

Modules & Services

Loading Services Differently

Ahead-of-Time Compilation

Wrap Up

Useful Resources & Links

Module Introduction

The Idea behind Modules

Understanding the App Module

Understanding Feature Modules

Creating a Recipe Feature Module

Module Import Order

Registering Routes in a Feature Module

Understanding Shared Modules

Creating a Shared Module

Creating a Shopping List Feature Module

Loading Components via Selectors vs Routing

A Common Gotcha

Creating the Auth Feature Module

Understanding Lazy Loading

Adding Lazy Loading to the Recipes Module

Protecting Lazy Loaded Routes with canLoad

How Modules and Services Work Together

Understanding the Core Module

Creating a Basic Core Module

Restructuring Services to use the Child Injector

Template Interaction & Production Builds

Using Ahead-of-Time Compilation

How to use AoT Compilation with the CLI

How to use AoT Compilation with the CLI

Preloading Lazy Loaded Routes

Wrap Up

Module Introduction

Deployment Preparation & Steps

Using Environment Variables

Deployment Example: Firebase Hosting

Server Routing vs Browser Routing

Module Introduction

Deployment Preparations and Important Steps

S3 & Bucket Policies

Example: Deploying to AWS S3

Module Introduction

The Documentation

Unlocking

Request Configuration and Response

Requesting Events

Settings Headers

Http Parameters

Progress

Change Firebase Rules Temporarily

Interceptors

Modifying Requests

Modifying Requests in Interceptors

Multiple Interceptors

Wrap Up

Useful Resources & Links

Module Introduction

What is Application State?

What is NgRx?

Getting Started with Reducers

Adding Logic to the Reducer

Understanding & Adding Actions

Setting Up the NgRx Store

Selecting State

Dispatching Actions

Multiple Actions

Preparing Update & Delete Actions

Updating & Deleting Ingredients

Expanding the State

Managing More State via NgRx

Removing Redundant Component State Management

First Summary & Clean Up

One Root State

Setting Up Auth Reducer & Actions

Dispatching Auth Actions

Auth Finished (For Now...)

And Important Note on Actions

Exploring NgRx Effects

Defining the First Effect

Effects & Error Handling

Login via NgRx Effects

Managing UI State in NgRx

Finishing the Login Effect

Preparing Other Auth Actions

Adding Signup

Further Auth Effects

Adding Auto-Login with NgRx

Adding Auto-Logout

Finishing the Auth Effects

Using the Store Devtools

The Router Store

Getting Started with NgRx for Recipes

Fetching Recipe Detail Data

Fetching Recipes & Using the Resolver

Fixing the Auth Redirect

Update, Delete and Add Recipes

Storing Recipes via Effects

Cleanup Work

Wrap Up

Alternative NgRx Syntax

Useful Resources & Links

MUST READ: The [LEGACY] Lectures

[LEGACY] Module Introduction

[LEGACY] Important: Angular 6, RxJS 6 and this section!

[LEGACY] State Challenges

[LEGACY] Getting Started with Reducers

[LEGACY] Adding Actions

[LEGACY] Finishing the First Reducer

[LEGACY] Registering the Application Store

[LEGACY] Selecting Data from State

[LEGACY] Dispatch Actions

[LEGACY] More Actions and Adding Ingredients

[LEGACY] Dispatching Update and Deleting Shopping List Actions

[LEGACY] Expanding App State

[LEGACY] Editing the Shopping-List via NgRx

[LEGACY] Managing all Relevant State

[LEGACY] Authentication and Side Effects - Introduction

[LEGACY] Setting up the Auth Store Files

[LEGACY] The Reducer

[LEGACY] Adding Reducer Logic & Actions

[LEGACY] Adjusting the App Module Setup

[LEGACY] Using Authentication

[LEGACY] Dispatch Actions

[LEGACY] Getting State Access in Http Interceptor

[LEGACY] Handling the Auth Token

[LEGACY] Only React to Actions Once via take(1)

[LEGACY] A Closer Look at Effects

[LEGACY] Auth Effects and Actions

[LEGACY] Using NgRx Effects with NgRx >= 7

[LEGACY] Effects - How they Work

Adding Auth Signup

[LEGACY] Adding Auth Signup

[LEGACY] Adding Auth Signin

[LEGACY] Navigation as a Side Effect

[LEGACY] Handling Logout via NgRx

[LEGACY] Additional Fixes

Additional Fixes

[LEGACY] Redirecting Upon Logout

[LEGACY] What's Next?

[LEGACY] The Router Store Package

[LEGACY] Store Devtools

[LEGACY] Lazy Load and Dynamic Injection

[LEGACY] Adding Recipe Actions

[LEGACY] Adding Recipe Reducers

[LEGACY] Dispatching and Selecting State

[LEGACY] Viewing and Deleting Recipes via NgRx

[LEGACY] Editing and Updating Recipes via NgRx

[LEGACY] Recipes Side Effects - Fetching from Server

[LEGACY] Recipes Side Effects - Storing Recipes on Server

[LEGACY] Cleaning Up

[LEGACY] Updating to RxJS 6+

[LEGACY] Wrap Up

[LEGACY] Useful Resources & Links

Module Introduction

Adding Angular Universal

Adding Angular Universal with NestJS

Deploying Universal Apps

Important: Remaining Lectures

Module Introduction

Getting Started with Angular Universal

Working on the App Module

Adding a Server-Side Build Workflow

Adding a NodeJS Server

Pre-Rendering the App on the Server

Next Steps

Angular Universal Gotchas

Making Animations Work with Angular 4+

Introduction

Setting up the Starting Project

Animations Triggers and State

Switching between States

Transitions

Advanced Transitions

Transition Phases

The "void" State

Using Keyframes for Animations

Grouping Transitions

Using Animation Callbacks

Module Introduction

Adding Service Workers

Caching Assets for Offline Use

Caching Dynamic Assets & URLs

Further Links & Resources

About this Section

Introduction

Why Unit Tests?

Analyzing the Testing Setup (as created by the CLI)

Running Tests (with the CLI)

Adding a Component and some fitting Tests

Testing Dependencies: Components and Services

Simulating Async Tasks

Using "fakeAsync" and "tick"

Isolated vs Non-Isolated Tests

Further Resources & Where to Go Next

Module Introduction

A Closer Look at "ng new"

IDE & Project Setup

Understanding the Config Files

Important CLI Commands

The "angular.json" File - A Closer Look

Angular Schematics - An Introduction

The "ng add" Command

Using Custom "ng generate" Schematics

Smooth Updating of Projects with "ng update"

Simplified Deployment with "ng deploy"

Understanding "Differential Loading"

Managing Multiple Projects in One Folder

Angular Libraries - An Introduction

Wrap Up

What changed with Angular 6?

What's New with Angular 8?

A First Look At Angular Elements

What's New & How to Update

Course Roundup

Bonus: More Content!

Introduction

What is Angular 2?

Problems with the CLI?

Creating an Angular 2 Project

Creating an Angular 2 Project

Got Setup Issues (with Angular 2 CLI)?

Editing our First App

Understanding the Project Structure

Setup & First App

Editing the First App

Why TypeScript? What is TypeScript?

Getting Started with Components

How an Angular 2 App gets started

Understanding AppModules

Using Templates & Styles

First Summary

Creating a new Component

About Unique Selectors

Using multiple Components

MUST WATCH: How to proceed with this Course

View Encapsulation & Styling

What are Components?

Components & Selectors

Inserting Content with ng-content

Databinding Overview

String Interpolation

Property Binding & Event Binding Overview

Property Binding

Binding to Custom Properties

Event Binding

Binding to Custom Events

More Information on Property & Event Binding

ngModel and AppModules

Two-Way Binding

The Component Lifecycle

Component Lifecycle Usage Examples

Template Access with Local References, ViewChild and ContentChild

Project Setup

IMPORTANT: Required Changes

Course Project: Creating the Header Component

Course Project: Creating the Recipes Component

Course Project: Creating Recipe Model & List Component

Course Project: Recipe Detail & Databinding

Course Project: Shopping List Component

Introduction

Initializing the Project

Setting up the Basic Project Files

Installing the Core Dependencies

Filling the Project Files with Some Life

Index.html & Polyfills

Installing Development Dependencies

Setting up a Development Workflow

Updating to Angular 6 + Webpack 4

Finishing & Using the Development Workflow

Setting up a Production Workflow

Adding Types & Fixing Bugs

Finishing Touches

Introduction

Using Types

Classes

Interfaces

Generics

Wrap up & Modules

Deep dive into TypeScript