Angular (Full App) with Angular Material, Angularfire and NgRx

Table of Contents

Chapter 1 : Getting Started

Welcome Introduction

What’s Inside the Course?

How To Get The Most Out Of This Course

Planning the App

Chapter 2 : A Brief Angular Refresher (OPTIONAL)

Module Introduction

What is Angular?

Project Setup with the Angular CLI

How an Angular App Starts and Works

Adding Components

Template Syntax

Using Directives like ngFor and ngIf

Custom Property Event Binding

Forms

Understanding Services Dependency Injection

Angular Routing

Chapter 3 : Angular Material

Module Introduction

Understanding Angular Material Components

Adding Angular Material to a Project

Stay Up To Date!

Our First Angular Material Component - The Button

Creating the Course App Structure

Working on The Signup Form

Flexbox - A Quick Refresher

Controlling the Layout with @angular/flex-layout

Adding Configuring the Submit Button

Implementing Hints and Validation Errors (on Forms)

Adding a Datepicker

Restricting Pickable Dates

Adding a Checkbox

Finishing the Form with Style

Wrap Up

Chapter 4 : Diving Deeper into Angular Material

Module Introduction

Adding Navigation a Sidenav

Working on the Sidenav and Toolbar

Styling the Sidenav

Making the Page Responsive

Adding Navigation Items

Splitting the Navigation Into Components

Working on the Welcome Screen

Adding a Tabs Component

Adding some “Cards”

Adding a Dropdown Menu

Adding a Spinner to the Training Screen

Adding a Nice Exercise Timer

Adding a Cancel Dialog Screen

Passing Data to the Dialog

Adding “Exit” and “Continue” Options

Wrap Up

Chapter 5 : Working with Data and Angular Material

Module Introduction

Important: RxJS 6

Implementing Authentication

Routing Authentication

Route Protection

Preparing the Exercise Data

Injecting Using the Training Service

Setting an Active Exercise

Controlling the Active Exercise

Adding a Form to the Training Component

Handling the Active Training via a Service

Handling “Complete” and “Cancel” Events

Adding the Angular Material Data Table

Adding Sorting to the Data Table

Adding Filtering to the Data Table

Adding Pagination to the Data Table

Wrap Up

Chapter 6 : Using Angularfire Firebase

Module Introduction

What is Firebase?

Getting Started with Firebase

What is Angularfire?

RxJS Oservables Refresher

Diving into Firebase

Listening to Value Changes (of Firestore)

Listening to Snapshot Changes (of Firestore, incl. Metadata)

Restructuring the Code

How Firebase Manages Subscriptions

Storing Completed Exercises on Firestore

Connecting the Data Table to Firestore

Working with Documents

Adding Real Authentication (Sign Up)

Adding User Login

Understanding Authentication in SPAs

Configuring Firestore Security Rules

Managing Firestore Subscriptions

Reorganizing the Code

Wrap Up

Chapter 7 : Optimizing the App

Module Introduction

Style Improvements Error Handling

Adding a Spinner

Adding a Re-Usable Snackbar (Notification)

Improving Error Handling

Splitting the App Into Modules

Optimizing Subscriptions

Creating a SharedModule

Splitting Up Routes

Loading a Module Lazily

Moving the Auth Guard

Wrap Up

Chapter 8 : Using NgRx for State Management

Module Introduction

What is Redux - An Overview

NgRx Core Concepts - A First Example

Working with Multiple Reducers Actions

Dispatching Actions Selecting State Slices

Adding an Auth Reducer (and Actions)

Adding Auth Subscriptions

Adding the Training Reducer and Actions with Payloads

Lazy Loaded State

Dispatching Training Actions

Selecting Training State

Selecting Single Values Correctly

Connecting the Data Table

Cleaning the Project Up

Adding a small Bugfix

Wrap Up

Chapter 9 : Deploying the App

Introduction Preparation

Deploying the App to Firebase Hosting

Chapter 10 : BONUS: Angular Material Themes

Module Introduction

Understanding Angular Material Themes

Customising an Angular Material Theme

Chapter 11 : BONUS: Angular Material Themes

Course Roundup