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

Use Angular, Angular Material, Angularfire (+ Firebase with Firestore) and NgRx to build a real Angular App

Angular is an amazing frontend JavaScript & TypeScript framework with which you can build powerful web applications.

There are a lot of courses that dive deeply into Angular but sometimes you just want to build an entire app and see how it all works in practice. And you want to use all these great third-party packages that can add a lot of awesome functionalities to your Angular app!

course covers exactly that!

We'll build an entire, realistic app which looks absolutely beautiful, uses Google's Material Design and is extremely fast! Thanks to Firebase and Angularfire, we'll add real-time database functionalities and see our updates almost before we make them!

Behind the scenes, NgRx will be used - a Redux-inspired state management solution that can greatly enhance your Angular app.

What are you waiting for, this is what you'll get in detail:

A brief refresher on Angular, just in case you forgot how it works (or never learned it)
A detailed introduction into Angular Material, its docs and its usage
A realistic app that uses many Angular Material components
Examples for components like Datepickers, Sidenavs or the Material Data Table (incl. sorting, filtering and live updating!)
A real-time database connection powered by Firebase (using Firestore) and Angularfire
A better understanding of RxJS observables
State-of-the-art state management with the help of NgRx
And so much more!

This course is for you if you want to practice Angular, want to see it in action or want to learn it with the help of a 100% practical project!

Who this course is for:

Students who want to dive deeper into Angular and who want to build a real app with it
Students who want to practice Angular
Students who want a practical guide towards building Angular apps
Students interested in using Firebase, NgRx and/ or Angular Material

Course content

Section 1Getting Started

Welcome & Introduction
2:12
What's Inside the Course?
2:24
Join our Online Learning Community
1:00
How To Get The Most Out Of This Course
2:15
Planning the App
1:37

Section 2A Brief Angular Refresher (OPTIONAL)

Module IntroductionPremium
0:46
What is Angular?Premium
4:22
MUST READ: Angular CLI - Latest VersionPremium
1:00
Project Setup with the Angular CLIPremium
4:23
How an Angular App Starts and WorksPremium
5:39
Adding ComponentsPremium
5:46
Template SyntaxPremium
7:00
Using Directives like ngFor and ngIfPremium
4:22
Custom Property & Event BindingPremium
7:13
FormsPremium
4:17
Understanding Services & Dependency InjectionPremium
11:10
Angular RoutingPremium
6:52
Where to Dive DeeperPremium
0:30
Useful Resources & LinksPremium
1:00

Section 3Angular Material

Module IntroductionPremium
3:17
Understanding Angular Material ComponentsPremium
3:03
Adding Angular Material to a ProjectPremium
13:13
Stay Up To Date!Premium
0:52
Our First Angular Material Component - The ButtonPremium
10:11
Why Do We Have To Import Everything Separately?Premium
1:00
Creating the Course App StructurePremium
7:54
Working on The Signup FormPremium
5:04
Flexbox - A Quick RefresherPremium
9:43
Controlling the Layout with @angular/flex-layoutPremium
6:05
Adding & Configuring the Submit ButtonPremium
5:06
Implementing Hints and Validation Errors (on Forms)Premium
9:38
Adding a DatepickerPremium
9:17
Restricting Pickable DatesPremium
3:27
Adding a CheckboxPremium
4:28
Finishing the Form with StylePremium
2:31
Assignment - Angular Material (Problem)Premium
1:34
Assignment - Angular Material (Solution)Premium
11:03
Wrap UpPremium
1:26
Useful Resources & LinksPremium
1:00

Section 4Diving Deeper into Angular Material

Module IntroductionPremium
0:39
Adding Navigation & a SidenavPremium
9:13
Working on the Sidenav and ToolbarPremium
5:13
Styling the SidenavPremium
9:08
Making the Page ResponsivePremium
5:08
Adding Navigation ItemsPremium
9:39
Splitting the Navigation Into ComponentsPremium
9:39
Working on the Welcome ScreenPremium
4:37
Adding a Tabs ComponentPremium
4:40
Adding some "Cards"Premium
6:20
Adding a Dropdown MenuPremium
6:00
Adding a Spinner to the Training ScreenPremium
9:16
Adding a Nice Exercise TimerPremium
3:21
Adding a Cancel Dialog ScreenPremium
6:11
Passing Data to the DialogPremium
6:34
Adding "Exit" and "Continue" OptionsPremium
3:07
Wrap UpPremium
1:12
Useful Resources & LinksPremium
1:00

Section 5Working with Data and Angular Material

Module IntroductionPremium
0:47
Important: RxJS 6Premium
1:11
IMPORTANT: Install rxjs-compatPremium
1:00
Code without rxjs-compatPremium
1:00
Implementing AuthenticationPremium
18:37
Assignment - Angular Material & Data (Problem)Premium
0:34
Assignment - Angular Material & Data (Solution)Premium
3:20
Routing & AuthenticationPremium
4:38
Route ProtectionPremium
6:54
Preparing the Exercise DataPremium
4:12
Injecting & Using the Training ServicePremium
4:34
Setting an Active ExercisePremium
3:14
Controlling the Active ExercisePremium
4:35
Adding a Form to the Training ComponentPremium
3:21
Handling the Active Training via a ServicePremium
4:53
RxJS 6 UpdatePremium
1:00
Handling "Complete" and "Cancel" EventsPremium
6:10
Adding the Angular Material Data TablePremium
14:07
Adding Sorting to the Data TablePremium
6:08
Adding Filtering to the Data TablePremium
5:20
Data Table Filtering++Premium
1:00
Adding Pagination to the Data TablePremium
5:33
Wrap UpPremium
0:51
Useful Resources & LinksPremium
1:00

Section 6Using Angularfire & Firebase

Module IntroductionPremium
0:59
What is Firebase?Premium
4:40
Getting Started with FirebasePremium
2:26
What is Angularfire?Premium
2:07
RxJS Observables RefresherPremium
6:24
Diving into FirebasePremium
7:35
Connecting the App with AngularFirePremium
12:23
Operators & RxJS 6Premium
1:00
Listening to Snapshot Changes (of Firestore, incl. Metadata)Premium
7:21
Restructuring the CodePremium
6:27
How Firebase Manages SubscriptionsPremium
2:52
Storing Completed Exercises on FirestorePremium
3:56
Connecting the Data Table to FirestorePremium
7:35
Working with DocumentsPremium
5:03
Adding Real Authentication (Sign Up)Premium
5:38
Adding User LoginPremium
1:51
Understanding Authentication in SPAsPremium
4:02
Configuring Firestore Security RulesPremium
4:15
Managing Firestore SubscriptionsPremium
5:31
Reorganizing the CodePremium
4:22
Wrap UpPremium
1:02
Useful Resources & LinksPremium
1:00

Section 7Optimizing the App

Module IntroductionPremium
0:50
Style Improvements & Error HandlingPremium
5:26
Adding a SpinnerPremium
10:28
Assignment - Optimizations (Problem)Premium
0:49
Assignment - Optimizations (Solution)Premium
5:23
Adding a Re-Usable Snackbar (Notification)Premium
3:05
Improving Error HandlingPremium
6:07
Splitting the App Into ModulesPremium
7:00
Assignment - Modules (Problem)Premium
0:42
Assignment - Modules (Solution)Premium
5:17
Optimizing SubscriptionsPremium
3:26
Creating a SharedModulePremium
4:40
Splitting Up RoutesPremium
3:33
Loading a Module LazilyPremium
10:19
Moving the Auth GuardPremium
2:37
Wrap UpPremium
1:58
Useful Resources & LinksPremium
1:00

Section 8Using NgRx for State Management

Module IntroductionPremium
4:04
What is Redux - An OverviewPremium
1:59
NgRx Core Concepts - A First ExamplePremium
14:39
Working with Multiple Reducers & ActionsPremium
12:35
Dispatching Actions & Selecting State SlicesPremium
4:37
Assignment - NgRx (Problem)Premium
0:54
Assignment - NgRx (Solution)Premium
9:04
What's Up with the RxJS Import Syntax?Premium
1:00
Adding an Auth Reducer (and Actions)Premium
9:51
Adding Auth SubscriptionsPremium
8:09
Adding the Training Reducer and Actions with PayloadsPremium
12:14
Lazy Loaded StatePremium
4:34
Dispatching Training ActionsPremium
5:16
Selecting Training StatePremium
6:33
Selecting Single Values CorrectlyPremium
7:30
Connecting the Data TablePremium
3:14
Cleaning the Project UpPremium
3:40
Adding a small BugfixPremium
0:54
Wrap UpPremium
1:02
Useful Resources & LinksPremium
1:00

Section 9Deploying the App

Introduction & PreparationPremium
1:43
Deploying the App to Firebase HostingPremium
4:10
Useful Resources & LinksPremium
1:00

Section 10BONUS: Angular Material Themes

Module IntroductionPremium
0:23
Understanding Angular Material ThemesPremium
1:38
Adding the Theme with Angular 6Premium
1:00
Customising an Angular Material ThemePremium
5:48
Useful Resources & LinksPremium
1:00

Section 11Round Up

Course RoundupPremium
0:49

Course instructor

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.