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

Course Curriculum

Chapter 1: Getting Started

Lecture 1: Welcome & Introduction

Lecture 2: What's Inside the Course?

Lecture 3: Join our Online Learning Community

Lecture 4: How To Get The Most Out Of This Course

Lecture 5: Planning the App

Lecture 6: MUST READ: Angular & Angular Material Versions

Chapter 2: A Brief Angular Refresher (OPTIONAL)

Lecture 1: Module Introduction

Lecture 2: What is Angular?

Lecture 3: Project Setup with the Angular CLI

Lecture 4: How an Angular App Starts and Works

Lecture 5: Adding Components

Lecture 6: Template Syntax

Lecture 7: Using Directives like ngFor and ngIf

Lecture 8: Custom Property & Event Binding

Lecture 9: Forms

Lecture 10: Understanding Services & Dependency Injection

Lecture 11: Angular Routing

Lecture 12: Where to Dive Deeper

Lecture 13: Useful Resources & Links

Chapter 3: Angular Material

Lecture 1: Module Introduction

Lecture 2: Understanding Angular Material Components

Lecture 3: Adding Angular Material to a Project

Lecture 4: Stay Up To Date!

Lecture 5: Our First Angular Material Component – The Button

Lecture 6: Why Do We Have To Import Everything Separately?

Lecture 7: Creating the Course App Structure

Lecture 8: Working on The Signup Form

Lecture 9: Flexbox – A Quick Refresher

Lecture 10: Controlling the Layout with @angular/flex-layout

Lecture 11: Adding & Configuring the Submit Button

Lecture 12: Implementing Hints and Validation Errors (on Forms)

Lecture 13: Adding a Datepicker

Lecture 14: Restricting Pickable Dates

Lecture 15: Adding a Checkbox

Lecture 16: Finishing the Form with Style

Lecture 17: Wrap Up

Lecture 18: Useful Resources & Links

Chapter 4: Diving Deeper into Angular Material

Lecture 1: Module Introduction

Lecture 2: Adding Navigation & a Sidenav

Lecture 3: Working on the Sidenav and Toolbar

Lecture 4: Styling the Sidenav

Lecture 5: Making the Page Responsive

Lecture 6: Adding Navigation Items

Lecture 7: Splitting the Navigation Into Components

Lecture 8: Working on the Welcome Screen

Lecture 9: Adding a Tabs Component

Lecture 10: Adding some "Cards"

Lecture 11: Adding a Dropdown Menu

Lecture 12: Adding a Spinner to the Training Screen

Lecture 13: Adding a Nice Exercise Timer

Lecture 14: Adding a Cancel Dialog Screen

Lecture 15: Passing Data to the Dialog

Lecture 16: Adding "Exit" and "Continue" Options

Lecture 17: Wrap Up

Lecture 18: Useful Resources & Links

Chapter 5: Working with Data and Angular Material

Lecture 1: Module Introduction

Lecture 2: Important: RxJS 6

Lecture 3: IMPORTANT: Install rxjs-compat

Lecture 4: Code without rxjs-compat

Lecture 5: Implementing Authentication

Lecture 6: Routing & Authentication

Lecture 7: Route Protection

Lecture 8: Preparing the Exercise Data

Lecture 9: Injecting & Using the Training Service

Lecture 10: Setting an Active Exercise

Lecture 11: Controlling the Active Exercise

Lecture 12: Adding a Form to the Training Component

Lecture 13: Handling the Active Training via a Service

Lecture 14: RxJS 6 Update

Lecture 15: Handling "Complete" and "Cancel" Events

Lecture 16: Adding the Angular Material Data Table

Lecture 17: Adding Sorting to the Data Table

Lecture 18: Adding Filtering to the Data Table

Lecture 19: Data Table Filtering++

Lecture 20: Adding Pagination to the Data Table

Lecture 21: Wrap Up

Lecture 22: Useful Resources & Links

Chapter 6: Using Angularfire & Firebase

Lecture 1: Module Introduction

Lecture 2: What is Firebase?

Lecture 3: Getting Started with Firebase

Lecture 4: What is Angularfire?

Lecture 5: RxJS Observables Refresher

Lecture 6: Diving into Firebase

Lecture 7: Listening to Value Changes (of Firestore)

Lecture 8: Operators & RxJS 6

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

Lecture 10: Restructuring the Code

Lecture 11: How Firebase Manages Subscriptions

Lecture 12: Storing Completed Exercises on Firestore

Lecture 13: Connecting the Data Table to Firestore

Lecture 14: Working with Documents

Lecture 15: Adding Real Authentication (Sign Up)