https://www.udemy.

com/angular-full-app-with-angular-material-
angularfire-ngrx/
 Angularfire & NgRx
Use Angular, Angular Material, Angularfire (+
Firebase with Firestore) and NgRx to build a real
Angular App
Bestseller

4.7 (2,450 ratings)

Course Ratings are calculated from individual students’ ratings and a variety of
other signals, like age of rating and reliability, to ensure that they reflect course
quality fairly and accurately.
11,918 students enrolled
Created by Academind by Maximilian Schwarzmüller, Maximilian
Schwarzmüller
Last updated 11/2018
What you'll learn
 Build amazing Angular apps with modern tools like Material, NgRx and
Angularfire

 Build real-time apps that not only work great but also look awesome!

Course content
Expand all 139 lectures11:10:49

+ Getting Started

4 lectures08:30

Welcome to this course, it's really awesome to have you on board! Let me

outline what you will learn in this course and what you can expect from it.

Welcome & Introduction

Preview02:14
In this course, we'll build an entire Angular app. In this lecture, I'll walk you
through what we build in greater detail. Let's start!

What's Inside the Course?

Preview02:24
You obviously want to get the most out of this course. Let me share some useful
hints on how you may achieve this!

How To Get The Most Out Of This Course

Preview02:15
As mentioned, an entire app is built throughout the course. Let's plan it from
scratch in this lecture!

Planning the App

Preview01:37

+ A Brief Angular Refresher (OPTIONAL)

14 lectures01:02:41

Let me introduce you to this module and what you're going to learn in it.

Module Introduction
Preview00:46
What is Angular? That's of course the core question - time to take a closer look.

What is Angular?
Preview04:22
MUST READ: Angular CLI - Latest Version
00:18
We know what Angular is and that it's awesome. Let's now start creating an
Angular project. In this lecture, I'll show you how that works.

Project Setup with the Angular CLI

Preview04:24
We created an Angular project, let me now quickly walk you through it and explain how
Angular apps actually start and work.

How an Angular App Starts and Works

05:39
Components are important, we learned that. Time to dig a bit deeper and add a brand-new
component to the project.

Adding Components
05:46
We have a component, let's now use its template to output content. The most interesting
content is of course dynamic one. Let's dig deeper.

Template Syntax
07:00
The template syntax we had a look at is super important. But we manipulate our template
with some other tools, too: Directives. Let's take a closer look.

Using Directives like ngFor and ngIf

04:22
We covered a lot of important concepts, it's now time to make our components more re-
usable. With custom property and event binding!

Custom Property & Event Binding

07:13
Handling user input is super important. Learn how to do that with ease in Angular apps in
this lecture.

Forms
04:17
We're nearing the end. But not before diving into another super-important
concept: Dependency injection and services. Learn what that is and how you may use it in
this lecture.

Understanding Services & Dependency Injection

11:10
We're creating a single-page-application but we still want to create the illusion of having
multiple pages. Learn how that works in this lecture.

Angular Routing
06:52
That was only a quick refresher. You can and should dig deeper. I'll tell you how to best do
that.

Where to Dive Deeper

00:30
Attached you find the source code for the module. In the article, you'll find useful links!

Useful Resources & Links

00:02

+ Angular Material

19 lectures01:32:31

What is this module about? Let me introduce you to it!

Module Introduction
03:17
Angular Material is a component library. That's good to know. Where do you find an
overview over all these components then? How do you use them? This lecture answers
these questions.

Understanding Angular Material Components

03:03
Make sure to install the right Angular Material version!

Installing the Right Angular Material Version

00:15
So we want to use Angular Material in our project. But how do we use it?  In this lecture, I'll
walk you through the entire setup process so that we can get started without issues!

Adding Angular Material to a Project

12:13
Angular Material is actively developed, therefore staying up to date is crucial. In this lecture,
I'll explain how you can ensure that you do.

Stay Up To Date!
00:52
Enough of the talking, time to get our hands dirty! In this lecture, we'll implement our first
Angular Material component. It doesn't even hurt!

Our First Angular Material Component - The Button

07:39
Why do we have to import Angular Material components the way we do?

Why Do We Have To Import Everything Separately?

00:24
With the first component created, it's time to think big, isn't it? Let's create the structure for
the course app!

Creating the Course App Structure

07:54
With the general structure created, let's dive right in and start our work on the signup form.
So many Angular Material components that can be added!

Working on The Signup Form

05:04
Using components and Material styles is one thing but we also need to position our
elements and components. We'll do this (indirectly) with Flexbox, hence it's time for a brief
refresher!

Flexbox - A Quick Refresher

09:43
We'll use Flexbox - but not directly. Instead, there's a useful third-party package that
integrates nicely into the Angular environment: @angular/flex-layout. Let's take a closer
look.

Controlling the Layout with @angular/flex-layout

06:05
Our signup form is taking shape but we definitely need a submit button to make it really
useful. Time to add and configure one in this lecture.

Adding & Configuring the Submit Button

05:06
We got all these form inputs, that's great. But a great user experience is obviously super
important. Learn how to use hints and validation error message to provide one.

Implementing Hints and Validation Errors (on Forms)

09:38
Not all input should be text entered by the user. We also need a date - so let's fetch one!
Adding a Datepicker
09:18
Sometimes, you don't want to offer the entire date range to the user. Learn how to restrict
the date picker in this lecture.

Restricting Pickable Dates

03:27
Let's add more material components. Time for the final touches on our signup form - with a
checkbox!

Adding a Checkbox
04:28
Let's finish the form - with style of course!

Finishing the Form with Style

02:31
We learned a lot about Angular Material - time to practice all these things. Here's your first
assignment!
Time to Practice - Angular Material
1 question
Let me wrap this module up and summarize what we learned thus far.

Wrap Up
01:26
Attached you find the source code for the module. In the article, you'll find useful links!

Useful Resources & Links

00:07

+ Diving Deeper into Angular Material

18 lectures01:40:03

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction
00:39
Is there any web app without navigation? Probably not. Ours certainly needs one. In this
lecture, we'll start adding some useful components to get one.

Adding Navigation & a Sidenav

09:13
Let's continue working on the navigation components by working on the sidenav and
toolbar (and letting them communicate).

Working on the Sidenav and Toolbar

05:13
Having a sidenav certainly is great but it also should be useful and not ugly. Let's style it!

Styling the Sidenav

09:09
Our page should of course be resonsive! Let's add responsiveness to it therefore!

Making the Page Responsive

05:08
What's a navigation without navigation items? Not worth that much I'd say, so let's add
some items we can go to.

Adding Navigation Items

09:39
We got all the navigation code in the AppComponent template - let's split it up!

Splitting the Navigation Into Components

09:39
Besides the Auth and Training sections in our app, we also have a welcome screen. Let's
fine-tune it.

Working on the Welcome Screen

04:37
We all love them: Tabs components. Let's add one to our trainings section.

Adding a Tabs Component

04:40
Do you know this "Cards" look? You see it on a lot of pages (Udemy included). Let's add our
own cards!

Adding some "Cards"

06:20
Our app is taking shape but in order to start a training, we need to be able to select one,
right? Time to add a dropdown.

Adding a Dropdown Menu

06:00
Our users are doing an exercise - let's provide some useful feedback regarding the
remaining duration.

Adding a Spinner to the Training Screen

09:16
Exercises take time - would be nice to also show this to the user.

Adding a Nice Exercise Timer

03:21
Sometimes, you just don't have time to finish an exercise. Let's allow the user to cancel but
let's also ask first.

Adding a Cancel Dialog Screen

06:11
We got a dialog but how can be get data into it? Let's take a look.

Passing Data to the Dialog

06:34
Our users should have choices (in the dialog). Let's add two routes:  Continue and exit.

Adding "Exit" and "Continue" Options

03:07
Let me wrap this module up and summarize what we learned thus far.
Wrap Up
01:12
Attached you find the source code for the module. In the article, you'll find useful links!

Useful Resources & Links

00:05

+ Working with Data and Angular Material

22 lectures01:36:53

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction
00:47
When using Angular 6 - and therefore RxJS 6, there's an important change you need to
make.

Important: RxJS 6
01:11
Don't skip this lecture!

IMPORTANT: Install rxjs-compat

00:14
Don't feel like using rxjs-compat? Go here!

Code without rxjs-compat

00:36
Let's add some authentication (sign up + login) to our application!

Implementing Authentication
18:37
We started adding data to our app. Now it's your turn!
Time to Practice - Angular Material & Data
1 question
With our "dummy" authentication in place, we should also tweak our routes a bit.

Routing & Authentication

04:38
Some routes should only be available to authenticated users. Let's see what we can do
about that.

Route Protection
06:54
The app is about exercises - let's prepare some exercise data therefore.

Preparing the Exercise Data

04:12
Let's connect more parts of our app with our data. For example the available exercises
which we store in the Training service.
Injecting & Using the Training Service
04:34
Providing available exercises is the first step, let's now ensure that users can actually select
and start an exercise.

Setting an Active Exercise

03:14
With the user being able to select an active training, let's now add functionality to actually
display it.

Controlling the Active Exercise

04:35
Time to fine-tune the "New Training" component and add a form to allow for the selection
of a new training.

Adding a Form to the Training Component

03:21
Let's continue working on the active training and fully control it via a service.

Handling the Active Training via a Service

04:53
Working with RxJS 6? Here's what you need to change.

RxJS 6 Update
00:14
We're allowing the user to complete or cancel and exercise, let's now also handles these
events appropriately in the service.

Handling "Complete" and "Cancel" Events

06:10
We got loads of data that should be displayed - time to add the Angular Material Data Table
which allows us to do just that.

Adding the Angular Material Data Table

14:07
Let's add some "Sorting" functionality to the data table.

Adding Sorting to the Data Table

06:08
Let's add some "Filtering" functionality to the data table.

Adding Filtering to the Data Table

05:20
Want to dive deeper into filtering? Here you go!

Data Table Filtering++

00:41
Let's add some "Pagination" functionality to the data table.

Adding Pagination to the Data Table

05:33
Let me wrap this module up and summarize what we learned thus far.

Wrap Up
00:51
Attached you find the source code for the module. In the article, you'll find useful links!

Useful Resources & Links

00:01

+ Using Angularfire & Firebase

22 lectures01:37:11

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction
00:59
In this module, we'll use Firebase by using Angularfire. What is Firebase though?

What is Firebase?
04:41
We'll use Firebase. Let's get started and create a Firebase project.

Getting Started with Firebase

02:26
Now that we know what Firebase is, let's take a closer look at Angularfire - the package we'll
use to connect to Firebase.

What is Angularfire?
02:07
Angularfire embraces RxJS Observables. Let's dive into a brief refresher on that then.

RxJS Oservables Refresher

06:24
Enough of the theory, let's dive in and see some observables in action!

Diving into Firebase

07:36
Let's connect our app to Firebase Firestore via Angularfire. Let's start by listening to value
changes.

Listening to Value Changes (of Firestore)

12:24
You learned how to adjust the code to RxJS 6 - here's one other adjustment you'll need to
make.

Operators & RxJS 6

00:36
We learned how to listen to value changes - no metadata is attached to these. Time for the
"big brother"!

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

07:21
Time for some code adjustments!
Restructuring the Code
06:27
We got all these ongoing subscriptions - what's actually happening behind the scenes?  Let's
see how Firebase manages them for us.

How Firebase Manages Subscriptions

02:52
Fetching data works, let's now see how we can actually store data on the server.

Storing Completed Exercises on Firestore

03:56
With finished exercises stored on the server, let's now connect our data table to these
exercises on Firestore.

Connecting the Data Table to Firestore

07:35
We worked with collection - let me also show you how you may directly work with single
documents.

Working with Documents

05:03
We're working with data - why don't we also use Firebase for authentication then?  Good
question, right? Let's start!

Adding Real Authentication (Sign Up)

05:38
Users are now able to sign up, time for the logical next step: Login.

Adding User Login

01:51
How does authentication in SPAs actually work? Let's take a closer look.

Understanding Authentication in SPAs

04:02
With authentication added, we should finally also protect our server-side. Time to add some
Firestore Security Rules.

Configuring Firestore Security Rules

04:15
If we log out, we'll get an error. Let's manage our Firestore subscriptions correctly.

Managing Firestore Subscriptions

05:31
A lot was achieved, let's finish the module by reorganizing our code.

Reorganizing the Code

04:22
Let me summarize this module and what we learned thus far.

Wrap Up
01:02
Attached you find the source code for the module. In the article, you'll find useful links!

Useful Resources & Links

00:03

+ Optimizing the App

13 lectures57:52

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction
00:50
Since we're talking about optimizations, let's work on the app style and the general error
handling we're doing.

Style Improvements & Error Handling

05:26
Waiting for content to load is annoying and can even be confusing. Time to improve UX  by
adding a spinner.

Adding a Spinner
10:28
Now that we started optimizing the app, here's a little assignment for you!
Time to Practice - Optimizations
1 question
A snackbar is a great tool to show notifications. Let's implement one - in a re-usable way.

Adding a Re-Usable Snackbar (Notification)

03:05
Errors happen! Even more important to handle them with grace then!

Improving Error Handling

06:07
Now that the app is growing, we can re-organize our code into different modules.

Splitting the App Into Modules

07:00
We started splitting up our app, now it's your turn.
Time to Practice - Modules
1 question
Now that we split our app up a bit, let's work on the subscriptions and improve them.

Optimizing Subscriptions
03:26
There are some shared functionalities in our app - time for a dedicated Angular module.

Creating a SharedModule
04:40
With all these new modules, we can now also split up our routes.

Splitting Up Routes
03:33
With routes split up, we can also load a module (the training module)  lazily. Let's do that!
Loading a Module Lazily
08:40
With lazy loading implemented, there's a better place for the Auth Guard.

Moving the Auth Guard

02:37
Let me summarize this module and what we learned thus far.

Wrap Up
01:58
Attached you find the source code for the module. In the article, you'll find useful links!

Useful Resources & Links

00:02

+ Using NgRx for State Management

18 lectures01:41:39

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction
04:04
NgRx builds up on Redux. But what is that actually? Which problem does it solve? Why do
we need it? Let's take a closer look.

What is Redux - An Overview

01:59
The best way to learn NgRx is to simply use it. Here's a first example!

NgRx Core Concepts - A First Example

14:39
We got a first example, time for the real implementation. Let's dive into multiple reducers
and actions.

Working with Multiple Reducers & Actions

12:35
NgRx is all about actions and state. Managing is one thing but we also need to dispatch
actions and get state slices. This lecture dives into these topics.

Dispatching Actions & Selecting State Slices

04:37
We had a look at the basics of NgRx, now it's your turn to practice it!
Time to Practice - NgRx
1 question
If you watch closely, you'll see different RxJS import syntaxes as well as some error
messages in my IDE. Where's that coming from?

What's Up with the RxJS Import Syntax?

00:45
We spent some time on the basics, let's now use all the knowledge to build our second
reducer. The auth reducer.

Adding an Auth Reducer (and Actions)

09:51
Having a reducer and feature state is nice but not worth that much if we don't use it. Time
to subscribe to the store!

Adding Auth Subscriptions

08:09
With the auth part finished, it's time for the next app feature: The Training part. This will be
lazy loaded and also feature actions with payloads.

Adding the Training Reducer and Actions with Payloads

12:14
Just as we can load feature modules lazily, we can load state lazily. Learn how it works in
this lecture.

Lazy Loaded State

04:34
The Training state is taking shape - time to also dispatch some actions so that we can see
some changes in our app.

Dispatching Training Actions

05:16
With the actions dispatched, the state is changing. Let's consume it by adding some
selectors.

Selecting Training State

06:33
Some values only need to be selected once. Learn how that would work in this lecture.

Selecting Single Values Correctly

07:30
We're already using the data table, let's now connect it to our NgRx state!

Connecting the Data Table

03:14
With all these changes, it's about time to do some clean up. Let's start!

Cleaning the Project Up

03:40
Whoops, there's a tiny logical error in our app. Let's fix it.

Adding a small Bugfix

00:55
Let me wrap this module up and summarize what we learned thus far!

Wrap Up
01:02
Attached you find the source code for the module. In the article, you'll find useful links!

Useful Resources & Links

00:02
 + Deploying the App

3 lectures05:55

Deploying Angular apps is not difficult. Here's the quick walkthrough!

Introduction & Preparation

01:43
We're already using Firebase, so why don't we use their hosting?  Learn how to deploy your
Angular app to Firebase Hosting in minutes.

Deploying the App to Firebase Hosting

04:10
Attached you find the source code for the module. In the article, you'll find useful links!

Useful Resources & Links

00:02

+ BONUS: Angular Material Themes

5 lectures08:18

Let me introduce you to this module and to what you'll learn in it.

Module Introduction
00:23
What's inside an Angular Material theme, which concept does it follow?  This lecture answers
these questions.

Understanding Angular Material Themes

01:38
Got an Angular CLI 6 project? Here you go!

Adding the Theme with Angular 6

00:28
With the basics set, it's time to leave the world of pre-defined themes and create our own
one!

Customising an Angular Material Theme

05:48
Attached you find the source code for the module. In the article, you'll find useful links!

Useful Resources & Links

00:01

1 more section
 Requirements
 You should bring basic Angular knowledge or the willingness to learn it along
the way. A brief introduction/ refresher module is provided in this course.

 Basic HTML, JS and CSS knowledge is required

 NO Material Design knowledge is required

Description
Angular is an amazing frontend 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!

This 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