Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Angular (Full App) with Angular Material, Angularfire & NgRx
Getting Started
Welcome & Introduction (2:12)
What's Inside the Course? (2:24)
Join our Online Learning Community
How To Get The Most Out Of This Course (2:15)
Planning the App (1:37)
The Academind Pro Referral Program
A Brief Angular Refresher (OPTIONAL)
Module Introduction (0:46)
What is Angular? (4:22)
MUST READ: Angular CLI - Latest Version
Project Setup with the Angular CLI (4:23)
How an Angular App Starts and Works (5:39)
Adding Components (5:46)
Template Syntax (7:00)
Using Directives like ngFor and ngIf (4:22)
Custom Property & Event Binding (7:13)
Forms (4:17)
Understanding Services & Dependency Injection (11:10)
Angular Routing (6:52)
Where to Dive Deeper (0:30)
Useful Resources & Links
Angular Material
Module Introduction (3:17)
Understanding Angular Material Components (3:03)
Adding Angular Material to a Project (13:13)
Stay Up To Date! (0:52)
Our First Angular Material Component - The Button (10:11)
Why Do We Have To Import Everything Separately?
Creating the Course App Structure (7:54)
Working on The Signup Form (5:04)
Flexbox - A Quick Refresher (9:43)
Controlling the Layout with @angular/flex-layout (6:05)
Adding & Configuring the Submit Button (5:06)
Implementing Hints and Validation Errors (on Forms) (9:38)
Adding a Datepicker (9:17)
Restricting Pickable Dates (3:27)
Adding a Checkbox (4:28)
Finishing the Form with Style (2:31)
Assignment - Angular Material (Problem) (1:34)
Assignment - Angular Material (Solution) (11:03)
Wrap Up (1:26)
Useful Resources & Links
Diving Deeper into Angular Material
Module Introduction (0:39)
Adding Navigation & a Sidenav (9:13)
Working on the Sidenav and Toolbar (5:13)
Styling the Sidenav (9:08)
Making the Page Responsive (5:08)
Adding Navigation Items (9:39)
Splitting the Navigation Into Components (9:39)
Working on the Welcome Screen (4:37)
Adding a Tabs Component (4:40)
Adding some "Cards" (6:20)
Adding a Dropdown Menu (6:00)
Adding a Spinner to the Training Screen (9:16)
Adding a Nice Exercise Timer (3:21)
Adding a Cancel Dialog Screen (6:11)
Passing Data to the Dialog (6:34)
Adding "Exit" and "Continue" Options (3:07)
Wrap Up (1:12)
Useful Resources & Links
Working with Data and Angular Material
Module Introduction (0:47)
Important: RxJS 6 (1:11)
IMPORTANT: Install rxjs-compat
Code without rxjs-compat
Implementing Authentication (18:37)
Assignment - Angular Material & Data (Problem) (0:34)
Assignment - Angular Material & Data (Solution) (3:20)
Routing & Authentication (4:38)
Route Protection (6:54)
Preparing the Exercise Data (4:12)
Injecting & Using the Training Service (4:34)
Setting an Active Exercise (3:14)
Controlling the Active Exercise (4:35)
Adding a Form to the Training Component (3:21)
Handling the Active Training via a Service (4:53)
RxJS 6 Update
Handling "Complete" and "Cancel" Events (6:10)
Adding the Angular Material Data Table (14:07)
Adding Sorting to the Data Table (6:08)
Adding Filtering to the Data Table (5:20)
Data Table Filtering++
Adding Pagination to the Data Table (5:33)
Wrap Up (0:51)
Useful Resources & Links
Using Angularfire & Firebase
Module Introduction (0:59)
What is Firebase? (4:40)
Getting Started with Firebase (2:26)
What is Angularfire? (2:07)
RxJS Observables Refresher (6:24)
Diving into Firebase (7:35)
Connecting the App with AngularFire (12:23)
Operators & RxJS 6
Listening to Snapshot Changes (of Firestore, incl. Metadata) (7:21)
Restructuring the Code (6:27)
How Firebase Manages Subscriptions (2:52)
Storing Completed Exercises on Firestore (3:56)
Connecting the Data Table to Firestore (7:35)
Working with Documents (5:03)
Adding Real Authentication (Sign Up) (5:38)
Adding User Login (1:51)
Understanding Authentication in SPAs (4:02)
Configuring Firestore Security Rules (4:15)
Managing Firestore Subscriptions (5:31)
Reorganizing the Code (4:22)
Wrap Up (1:02)
Useful Resources & Links
Optimizing the App
Module Introduction (0:50)
Style Improvements & Error Handling (5:26)
Adding a Spinner (10:28)
Assignment - Optimizations (Problem) (0:49)
Assignment - Optimizations (Solution) (5:23)
Adding a Re-Usable Snackbar (Notification) (3:05)
Improving Error Handling (6:07)
Splitting the App Into Modules (7:00)
Assignment - Modules (Problem) (0:42)
Assignment - Modules (Solution) (5:17)
Optimizing Subscriptions (3:26)
Creating a SharedModule (4:40)
Splitting Up Routes (3:33)
Loading a Module Lazily (10:19)
Moving the Auth Guard (2:37)
Wrap Up (1:58)
Useful Resources & Links
Using NgRx for State Management
Module Introduction (4:04)
What is Redux - An Overview (1:59)
NgRx Core Concepts - A First Example (14:39)
Working with Multiple Reducers & Actions (12:35)
Dispatching Actions & Selecting State Slices (4:37)
Assignment - NgRx (Problem) (0:54)
Assignment - NgRx (Solution) (9:04)
What's Up with the RxJS Import Syntax?
Adding an Auth Reducer (and Actions) (9:51)
Adding Auth Subscriptions (8:09)
Adding the Training Reducer and Actions with Payloads (12:14)
Lazy Loaded State (4:34)
Dispatching Training Actions (5:16)
Selecting Training State (6:33)
Selecting Single Values Correctly (7:30)
Connecting the Data Table (3:14)
Cleaning the Project Up (3:40)
Adding a small Bugfix (0:54)
Wrap Up (1:02)
Useful Resources & Links
Deploying the App
Introduction & Preparation (1:43)
Deploying the App to Firebase Hosting (4:10)
Useful Resources & Links
BONUS: Angular Material Themes
Module Introduction (0:23)
Understanding Angular Material Themes (1:38)
Adding the Theme with Angular 6
Customising an Angular Material Theme (5:48)
Useful Resources & Links
Round Up
Course Roundup (0:49)
Styling the Sidenav
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock