Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreAngular (Full App) with Angular Material, Angularfire & NgRx
Angular (Full App) with Angular Material, Angularfire & NgRx
Use Angular, Angular Material, Angularfire (+ Firebase with Firestore) and NgRx to build a real Angular App
Highest Rated
Last updated 6/2024
English
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!
Explore related topics
Course content
11 sections • 140 lectures • 11h 16m total length
- Welcome & Introduction2:14
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.
- What's Inside the Course?2:24
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!
- Join our Online Learning Community0:22
- How To Get The Most Out Of This Course2:15
You obviously want to get the most out of this course. Let me share some useful hints on how you may achieve this!
- Planning the App1:37
As mentioned, an entire app is built throughout the course. Let's plan it from scratch in this lecture!
- MUST READ: Angular & Angular Material Versions0:17
- Module Introduction0:46
Let me introduce you to this module and what you're going to learn in it.
- What is Angular?4:22
What is Angular? That's of course the core question - time to take a closer look.
- Project Setup with the Angular CLI4:23
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.
- How an Angular App Starts and Works5:39
We created an Angular project, let me now quickly walk you through it and explain how Angular apps actually start and work.
- Adding Components5:46
Components are important, we learned that. Time to dig a bit deeper and add a brand-new component to the project.
- Template Syntax7:00
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.
- Using Directives like ngFor and ngIf4:22
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.
- Custom Property & Event Binding7:13
We covered a lot of important concepts, it's now time to make our components more re-usable. With custom property and event binding!
- Forms4:17
Handling user input is super important. Learn how to do that with ease in Angular apps in this lecture.
- Understanding Services & Dependency Injection11:10
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.
- Angular Routing6:52
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.
- Where to Dive Deeper0:30
That was only a quick refresher. You can and should dig deeper. I'll tell you how to best do that.
- Useful Resources & Links0:02
Attached you find the source code for the module. In the article, you'll find useful links!
- Module Introduction3:17
What is this module about? Let me introduce you to it!
- Understanding Angular Material Components3:03
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.
- Adding Angular Material to a Project13:12
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!
- Stay Up To Date!0:52
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.
- Our First Angular Material Component - The Button10:11
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!
- Why Do We Have To Import Everything Separately?0:24
Why do we have to import Angular Material components the way we do?
- Creating the Course App Structure7:54
With the first component created, it's time to think big, isn't it? Let's create the structure for the course app!
- Working on The Signup Form5:04
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!
- Flexbox - A Quick Refresher9:43
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!
- Controlling the Layout with @angular/flex-layout6:05
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.
- Adding & Configuring the Submit Button5:06
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.
- Implementing Hints and Validation Errors (on Forms)9:38
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.
- Adding a Datepicker9:17
Not all input should be text entered by the user. We also need a date - so let's fetch one!
- Restricting Pickable Dates3:27
Sometimes, you don't want to offer the entire date range to the user. Learn how to restrict the date picker in this lecture.
- Adding a Checkbox4:28
Let's add more material components. Time for the final touches on our signup form - with a checkbox!
- Finishing the Form with Style2:31
Let's finish the form - with style of course!
- Time to Practice - Angular Material
- Wrap Up1:26
Let me wrap this module up and summarize what we learned thus far.
- Useful Resources & Links0:04
Attached you find the source code for the module. In the article, you'll find useful links!
- Module Introduction0:39
Let me introduce you to this module and to what you're going to learn in it.
- Adding Navigation & a Sidenav9:13
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.
- Working on the Sidenav and Toolbar5:13
Let's continue working on the navigation components by working on the sidenav and toolbar (and letting them communicate).
- Styling the Sidenav9:09
Having a sidenav certainly is great but it also should be useful and not ugly. Let's style it!
- Making the Page Responsive5:08
Our page should of course be resonsive! Let's add responsiveness to it therefore!
- Adding Navigation Items9:39
What's a navigation without navigation items? Not worth that much I'd say, so let's add some items we can go to.
- Splitting the Navigation Into Components9:39
We got all the navigation code in the AppComponent template - let's split it up!
- Working on the Welcome Screen4:37
Besides the Auth and Training sections in our app, we also have a welcome screen. Let's fine-tune it.
- Adding a Tabs Component4:40
We all love them: Tabs components. Let's add one to our trainings section.
- Adding some "Cards"6:20
Do you know this "Cards" look? You see it on a lot of pages (Udemy included). Let's add our own cards!
- Adding a Dropdown Menu6:00
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 Spinner to the Training Screen9:16
Our users are doing an exercise - let's provide some useful feedback regarding the remaining duration.
- Adding a Nice Exercise Timer3:21
Exercises take time - would be nice to also show this to the user.
- Adding a Cancel Dialog Screen6:11
Sometimes, you just don't have time to finish an exercise. Let's allow the user to cancel but let's also ask first.
- Passing Data to the Dialog6:34
We got a dialog but how can be get data into it? Let's take a look.
- Adding "Exit" and "Continue" Options3:07
Our users should have choices (in the dialog). Let's add two routes: Continue and exit.
- Wrap Up1:12
Let me wrap this module up and summarize what we learned thus far.
- Useful Resources & Links0:04
Attached you find the source code for the module. In the article, you'll find useful links!
- Module Introduction0:47
Let me introduce you to this module and to what you're going to learn in it.
- Important: RxJS 61:11
When using Angular 6 - and therefore RxJS 6, there's an important change you need to make.
- IMPORTANT: Install rxjs-compat0:13
Don't skip this lecture!
- Code without rxjs-compat0:33
Don't feel like using rxjs-compat? Go here!
- Implementing Authentication18:37
Let's add some authentication (sign up + login) to our application!
- Time to Practice - Angular Material & Data
- Routing & Authentication4:38
With our "dummy" authentication in place, we should also tweak our routes a bit.
- Route Protection6:54
Some routes should only be available to authenticated users. Let's see what we can do about that.
- Preparing the Exercise Data4:12
The app is about exercises - let's prepare some exercise data therefore.
- Injecting & Using the Training Service4:34
Let's connect more parts of our app with our data. For example the available exercises which we store in the Training service.
- Setting an Active Exercise3:14
Providing available exercises is the first step, let's now ensure that users can actually select and start an exercise.
- Controlling the Active Exercise4:35
With the user being able to select an active training, let's now add functionality to actually display it.
- Adding a Form to the Training Component3:21
Time to fine-tune the "New Training" component and add a form to allow for the selection of a new training.
- Handling the Active Training via a Service4:53
Let's continue working on the active training and fully control it via a service.
- RxJS 6 Update0:11
Working with RxJS 6? Here's what you need to change.
- Handling "Complete" and "Cancel" Events6:10
We're allowing the user to complete or cancel and exercise, let's now also handles these events appropriately in the service.
- Adding the Angular Material Data Table14:07
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 Sorting to the Data Table6:08
Let's add some "Sorting" functionality to the data table.
- Adding Filtering to the Data Table5:20
Let's add some "Filtering" functionality to the data table.
- Data Table Filtering++0:42
Want to dive deeper into filtering? Here you go!
- Adding Pagination to the Data Table5:33
Let's add some "Pagination" functionality to the data table.
- Wrap Up0:51
Let me wrap this module up and summarize what we learned thus far.
- Useful Resources & Links0:01
Attached you find the source code for the module. In the article, you'll find useful links!
- Module Introduction0:59
Let me introduce you to this module and to what you're going to learn in it.
- What is Firebase?4:41
In this module, we'll use Firebase by using Angularfire. What is Firebase though?
- Getting Started with Firebase2:26
We'll use Firebase. Let's get started and create a Firebase project.
- What is Angularfire?2:07
Now that we know what Firebase is, let's take a closer look at Angularfire - the package we'll use to connect to Firebase.
- RxJS Observables Refresher6:24
Angularfire embraces RxJS Observables. Let's dive into a brief refresher on that then.
- Diving into Firebase7:36
Enough of the theory, let's dive in and see some observables in action!
- Listening to Value Changes (of Firestore)12:23
- Operators & RxJS 60:31
You learned how to adjust the code to RxJS 6 - here's one other adjustment you'll need to make.
- Listening to Snapshot Changes (of Firestore, incl. Metadata)7:21
Learn to use snapshot changes with angularfire to access document IDs and data, map results to an exercise model with RxJS, and enable real-time updates in Angular apps.
- Restructuring the Code6:27
Time for some code adjustments!
- How Firebase Manages Subscriptions2:52
We got all these ongoing subscriptions - what's actually happening behind the scenes? Let's see how Firebase manages them for us.
- Storing Completed Exercises on Firestore3:56
Fetching data works, let's now see how we can actually store data on the server.
- Connecting the Data Table to Firestore7:35
With finished exercises stored on the server, let's now connect our data table to these exercises on Firestore.
- Working with Documents5:03
We worked with collection - let me also show you how you may directly work with single documents.
- Adding Real Authentication (Sign Up)5:38
We're working with data - why don't we also use Firebase for authentication then? Good question, right? Let's start!
- Adding User Login1:51
Users are now able to sign up, time for the logical next step: Login.
- Understanding Authentication in SPAs4:02
How does authentication in SPAs actually work? Let's take a closer look.
- Configuring Firestore Security Rules4:15
With authentication added, we should finally also protect our server-side. Time to add some Firestore Security Rules.
- Managing Firestore Subscriptions5:31
If we log out, we'll get an error. Let's manage our Firestore subscriptions correctly.
- Reorganizing the Code4:22
A lot was achieved, let's finish the module by reorganizing our code.
- Wrap Up1:02
Let me summarize this module and what we learned thus far.
- Useful Resources & Links0:03
Attached you find the source code for the module. In the article, you'll find useful links!
- Module Introduction0:50
Let me introduce you to this module and to what you're going to learn in it.
- Style Improvements & Error Handling5:26
Since we're talking about optimizations, let's work on the app style and the general error handling we're doing.
- Adding a Spinner10:28
Waiting for content to load is annoying and can even be confusing. Time to improve UX by adding a spinner.
- Time to Practice - Optimizations
- Adding a Re-Usable Snackbar (Notification)3:05
A snackbar is a great tool to show notifications. Let's implement one - in a re-usable way.
- Improving Error Handling6:07
Errors happen! Even more important to handle them with grace then!
- Splitting the App Into Modules7:00
Now that the app is growing, we can re-organize our code into different modules.
- Time to Practice - Modules
- Optimizing Subscriptions3:26
Now that we split our app up a bit, let's work on the subscriptions and improve them.
- Creating a SharedModule4:40
There are some shared functionalities in our app - time for a dedicated Angular module.
- Splitting Up Routes3:33
With all these new modules, we can now also split up our routes.
- Loading a Module Lazily10:19
With routes split up, we can also load a module (the training module) lazily. Let's do that!
- Moving the Auth Guard2:37
With lazy loading implemented, there's a better place for the Auth Guard.
- Wrap Up1:58
Let me summarize this module and what we learned thus far.
- Useful Resources & Links0:02
Attached you find the source code for the module. In the article, you'll find useful links!
- Module Introduction4:04
Let me introduce you to this module and to what you're going to learn in it.
- What is Redux - An Overview1:59
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.
- NgRx Core Concepts - A First Example14:39
The best way to learn NgRx is to simply use it. Here's a first example!
- Working with Multiple Reducers & Actions12:35
We got a first example, time for the real implementation. Let's dive into multiple reducers and actions.
- Dispatching Actions & Selecting State Slices4:37
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.
- Time to Practice - NgRx
- What's Up with the RxJS Import Syntax?0:47
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?
- Adding an Auth Reducer (and Actions)9:51
We spent some time on the basics, let's now use all the knowledge to build our second reducer. The auth reducer.
- Adding Auth Subscriptions8:09
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 the Training Reducer and Actions with Payloads12:14
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.
- Lazy Loaded State4:34
Just as we can load feature modules lazily, we can load state lazily. Learn how it works in this lecture.
- Dispatching Training Actions5:16
The Training state is taking shape - time to also dispatch some actions so that we can see some changes in our app.
- Selecting Training State6:33
With the actions dispatched, the state is changing. Let's consume it by adding some selectors.
- Selecting Single Values Correctly7:30
Some values only need to be selected once. Learn how that would work in this lecture.
- Connecting the Data Table3:14
We're already using the data table, let's now connect it to our NgRx state!
- Cleaning the Project Up3:40
With all these changes, it's about time to do some clean up. Let's start!
- Adding a small Bugfix0:55
Whoops, there's a tiny logical error in our app. Let's fix it.
- Wrap Up1:02
Let me wrap this module up and summarize what we learned thus far!
- Useful Resources & Links0:02
Attached you find the source code for the module. In the article, you'll find useful links!
- Introduction & Preparation1:43
Deploying Angular apps is not difficult. Here's the quick walkthrough!
- Deploying the App to Firebase Hosting4:10
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.
- Useful Resources & Links0:02
Attached you find the source code for the module. In the article, you'll find useful links!
- Module Introduction0:23
Let me introduce you to this module and to what you'll learn in it.
- Understanding Angular Material Themes1:38
What's inside an Angular Material theme, which concept does it follow? This lecture answers these questions.
- Adding the Theme with Angular 60:28
Got an Angular CLI 6 project? Here you go!
- Customising an Angular Material Theme5:48
With the basics set, it's time to leave the world of pre-defined themes and create our own one!
- Useful Resources & Links0:01
Attached you find the source code for the module. In the article, you'll find useful links!
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 many 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!
Please note that this course was recorded with an older version of Angular & Angular Material. The code shown in the videos might not always work with the latest versions of these packages. The general concepts & solution steps still apply, of course.
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