Certified Angular 8 Developer

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

Property Binding vs String Interpolation

Event Binding

Passing and Using Data with Event Binding

Two-Way-Databinding

Combining all Forms of Databinding

Using ngIf to Output Data Conditionally

Understanding Directives

Enhancing ngIf with an Else Condition

Styling Elements Dynamically with ngStyle

Applying CSS Classes Dynamically with ngClass

Outputting Lists with ngFor

Getting the Index when using ngFor

Video Module 3 – Course Project – The Basics 15 Topics

Expand

Lesson Content

0% Complete 0/15 Steps

Project Introduction

Planning the App

Setting up the Application

Creating the Components

Using the Components

Adding a 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

Video Module 4 – Debugging 3 Topics

Expand

Lesson Content

0% Complete 0/3 Steps

Understanding Angular Error Messages

Debugging Code in the Browser Using Sourcemaps

Using Augury to Dive into Angular Apps

Video Module 5 – Components & Databinding Deep Dive 19 Topics

Expand

Lesson Content

0% Complete 0/19 Steps

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

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

Getting Access to ng-content with @ContentChild

Video Module 6 – Course Project – Components & Databinding 5 Topics

Expand

Lesson Content

0% Complete 0/5 Steps

Adding Navigation with Event Binding and ngIf

Passing Recipe Data with Property Binding

Passing Data with Event and Property Binding (Combined)

Allowing the User to Add Ingredients to the Shopping List

Video Module 7 – Directives Deep Dive 11 Topics

Expand

Lesson Content

0% Complete 0/11 Steps

ngClass and ngStyle Recap

ngFor and ngIf Recap

Creating a Basic Attribute Directive

Using the Renderer to build a Better Attribute Directive

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

Video Module 8 – Course Project – Directives 1 Topic

Expand

Lesson Content

0% Complete 0/1 Steps

Building and Using a Dropdown Directive

Video Module 9 – Using Services & Dependency Injection 10 Topics

Expand

Lesson Content

0% Complete 0/10 Steps

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

Video Module 10 – Course Project – Services & Dependency Injection 8 Topics

Expand

Lesson Content

0% Complete 0/8 Steps

Managing Recipes in a Recipe Service

Setting up the Services

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)

Video Module 11 – Changing Pages with Routing 29 Topics

Expand

Lesson Content

0% Complete 0/29 Steps

Setting up and Loading Routes

Why do we need a Router?

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

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

Video Module 12 – Course Project – Routing 14 Topics

Expand

Lesson Content

0% Complete 0/14 Steps

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

Video Module 13 – Understanding Observables 9 Topics

Expand

Lesson Content

0% Complete 0/9 Steps

Analyzing Angular Observables

Getting Closer to the Core of Observables

Building a Custom Observable

Errors & Completion

Observables & You!

Understanding Operators

Subjects

Video Module 14 – Course Project – Observables 1 Topic

Expand

Lesson Content

0% Complete 0/1 Steps

Improving the Reactive Service with Observables (Subjects)

Video Module 15 – Handling Forms in Angular Apps 33 Topics

Expand

Lesson Content

0% Complete 0/33 Steps

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

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

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

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

Video Module 16 – Course Project – Forms 21 Topics

Expand

Lesson Content

0% Complete 0/21 Steps

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

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

Video Module 17 – Using Pipes to Transform Output 10 Topics

Expand

Lesson Content

0% Complete 0/10 Steps

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

Video Module 18 – Making Http Requests 27 Topics

Expand

Lesson Content

0% Complete 0/27 Steps

A New IDE

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

Video Module 19 – Course Project – Http 8 Topics

Expand

Lesson Content

0% Complete 0/8 Steps

Setting Up the DataStorage Service

Backend (Firebase) Setup

Storing Recipes

Fetching Recipes

Transforming Response Data

Resolving Data Before Loading

Fixing a Bug with the Resolver

Video Module 20 – Authentication & Route Protection in Angular Apps 21 Topics

Expand

Lesson Content

0% Complete 0/21 Steps

Switching Between Auth Modes

How Authentication Works

Adding the Auth Page

Handling Form Input

Preparing the Backend

Preparing the Signup Request

Sending the Signup Request

Adding a Loading Spinner & Error Handling Logic

Improving Error Handling

Sending Login Requests

Creating & Storing the User Data

Reflecting the Auth State in the UI

Adding the Token to Outgoing Requests

Attaching the Token with an Interceptor

Video Module 21 – Dynamic Components 9 Topics

Expand

Lesson Content

0% Complete 0/9 Steps

Adding an Alert Modal Component

Understanding the Different Approaches

Using ngIf

Preparing Programmatic Creation

Creating a Component Programmatically

Understanding entryComponents

Data Binding & Event Binding

Video Module 22 – Angular Modules & Optimizing Angular Apps 19 Topics

Expand

Lesson Content

0% Complete 0/19 Steps

Getting Started with Feature Modules

What are Modules?

Analyzing the AppModule

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

More Lazy Loading

Preloading Lazy-Loaded Code

Modules & Services

Loading Services Differently

Ahead-of-Time Compilation

Video Module 23 – Deploying an Angular App 4 Topics

Expand

Lesson Content

0% Complete 0/4 Steps

Deployment Preparations and Important Steps

Using Environment Variables

Deployment Example: Firebase Hosting

Video Module 24 – Bonus: Working with NgRx in our Project 43 Topics

Expand

Lesson Content

0% Complete 0/43 Steps

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

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

Video Module 25 – Bonus: Angular Universal 7 Topics

Expand

Lesson Content

0% Complete 0/7 Steps

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

Video Module 26 – Angular Animations 11 Topics

Expand

Lesson Content

0% Complete 0/11 Steps

Setting up the Starting Project

Animations Triggers and State

Switching between States

Using Keyframes for Animations

Grouping Transitions

Using Animation Callbacks

Video Module 27 – Adding Offline Capabilities with Service Workers 4 Topics

Expand

Lesson Content

0% Complete 0/4 Steps

Caching Assets for Offline Use

Adding Service Workers

Caching Dynamic Assets & URLs

Video Module 28 – A Basic Introduction to Unit Testing in Angular Apps 9 Topics

Expand

Lesson Content

0% Complete 0/9 Steps