Angular (Full App) with Angular Material, Angularfire & NgRx
4.7 (4,988 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.
23,817 students enrolled

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

Use Angular, Angular Material, Angularfire (+ Firebase with Firestore) and NgRx to build a real Angular App
Bestseller
4.7 (4,985 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.
23,817 students enrolled
Last updated 4/2020
English
English [Auto-generated], French [Auto-generated], 4 more
  • German [Auto-generated]
  • Italian [Auto-generated]
  • Portuguese [Auto-generated]
  • Spanish [Auto-generated]
Current price: $100.99 Original price: $144.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 11 hours on-demand video
  • 20 articles
  • 91 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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 140 lectures 11:16:27
+ Getting Started
5 lectures 08:51

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.

Preview 02: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!

Preview 02:24
Join our Online Learning Community
00:21

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

Preview 02:15

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

Preview 01:37
+ A Brief Angular Refresher (OPTIONAL)
14 lectures 01:02:41

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

Preview 00:46

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

Preview 04: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.

Preview 04: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
18 lectures 01:35:44

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

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
13: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
10:11

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:04
+ Diving Deeper into Angular Material
18 lectures 01:40:02

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:04
+ Working with Data and Angular Material
22 lectures 01:36:47

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:13

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

Code without rxjs-compat
00:33

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:11

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:42

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 lectures 01:37:06

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 Observables Refresher
06:24

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

Diving into Firebase
07:36
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:31
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 lectures 59:31

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
10:19

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 lectures 01:41:41

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:47

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 lectures 05: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 lectures 08: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
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 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!

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