Angular (Full App) with Angular Material/ Angularfire & NgRx
About Course
This free Angular course will help you build a full-fledged web application from scratch using Angular Material, Angularfire, and NgRx. Learn to create beautiful user interfaces with Google’s Material Design, leverage real-time database functionalities with Firebase, and implement efficient state management with NgRx. This comprehensive course will cover everything you need to know to develop powerful and interactive Angular applications. It’s a great opportunity to put your Angular knowledge to the test and see how it works in practice. This course is offered for free on Udemy and covers topics like:
- Angular fundamentals
- Angular Material components
- Firebase integration with Firestore
- RxJS observables
- NgRx for state management
What Will You 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
Getting Started
-
A Message from the Professor
-
Welcome & Introduction
02:14 -
What’s Inside the Course
02:24 -
How To Get The Most Out Of This Course
02:15 -
Planning the App
01:37 -
Course Material Download Link
00:00
A Brief Angular Refresher (OPTIONAL)
-
Module Introduction
00:46 -
What is Angular
04:22 -
Project Setup with the Angular CLI
04:24 -
How an Angular App Starts and Works
05:39 -
Adding Components
05:46 -
Template Syntax
07:00 -
Using Directives like ngFor and ngIf
04:22 -
Custom Property & Event Binding
07:13 -
Forms
04:17 -
Understanding Services & Dependency Injection
11:10 -
Angular Routing
06:52 -
Where to Dive Deeper
00:30
Angular Material
-
Module Introduction
03:17 -
Understanding Angular Material Components
03:03 -
Adding Angular Material to a Project
12:13 -
Stay Up To Date!
00:52 -
Our First Angular Material Component – The Button
07:39 -
Creating the Course App Structure
07:54 -
Working on The Signup Form
05:04 -
Flexbox – A Quick Refresher
09:43 -
Controlling the Layout with @angularflex-layout
06:05 -
Adding & Configuring the Submit Button
05:06 -
Implementing Hints and Validation Errors (on Forms)
09:38 -
Adding a Datepicker
09:17 -
Restricting Pickable Dates
03:27 -
Adding a Checkbox
04:28 -
Finishing the Form with Style
02:31 -
Wrap Up
01:26
Diving Deeper into Angular Material
-
Module Introduction
00:39 -
Adding Navigation & a Sidenav
09:13 -
Working on the Sidenav and Toolbar
05:13 -
Styling the Sidenav
09:09 -
Making the Page Responsive
05:08 -
Adding Navigation Items
09:39 -
Splitting the Navigation Into Components
09:39 -
Working on the Welcome Screen
04:37 -
Adding a Tabs Component
04:40 -
Adding some Cards
06:20 -
Adding a Dropdown Menu
06:00 -
Adding a Spinner to the Training Screen
09:16 -
Adding a Nice Exercise Timer
03:21 -
Adding a Cancel Dialog Screen
06:12 -
Passing Data to the Dialog
06:34 -
Adding Exit and Continue Options
03:07 -
Wrap Up
01:12
Working with Data and Angular Material
-
Module Introduction
00:48 -
Important RxJS 6
01:11 -
Implementing Authentication
18:37 -
Routing & Authentication
04:39 -
Route Protection
06:54 -
Preparing the Exercise Data
04:12 -
Injecting & Using the Training Service
04:34 -
Setting an Active Exercise
03:14 -
Controlling the Active Exercise
04:35 -
Adding a Form to the Training Component
03:21 -
Handling the Active Training via a Service
04:54 -
Handling Complete and Cancel Events
06:10 -
Adding the Angular Material Data Table
14:07 -
Adding Sorting to the Data Table
06:08 -
Adding Filtering to the Data Table
05:20 -
Adding Pagination to the Data Table
05:33 -
Wrap Up
00:52
Using Angularfire & Firebase
-
Module Introduction
00:59 -
What is Firebase
04:41 -
Getting Started with Firebase
02:26 -
What is Angularfire
02:08 -
RxJS Observables Refresher
06:24 -
Diving into Firebase
07:36 -
Listening to Value Changes (of Firestore)
12:24 -
Listening to Snapshot Changes (of Firestore incl. Metadata)
07:21 -
Restructuring the Code
06:27 -
How Firebase Manages Subscriptions
02:53 -
Storing Completed Exercises on Firestore
03:56 -
Connecting the Data Table to Firestore
07:35 -
Working with Documents
05:03 -
Adding Real Authentication (Sign Up)
05:38 -
Adding User Login
01:51 -
Understanding Authentication in SPAs
04:02 -
Configuring Firestore Security Rules
04:15 -
Managing Firestore Subscriptions
05:31 -
Reorganizing the Code
04:22 -
Wrap Up
01:02
Optimizing the App
-
Module Introduction
00:51 -
Style Improvements & Error Handling
05:26 -
Adding a Spinner
10:28 -
Adding a Re-Usable Snackbar (Notification)
03:06 -
Improving Error Handling
06:07 -
Splitting the App Into Modules
07:01 -
Optimizing Subscriptions
03:26 -
Creating a SharedModule
04:40 -
Splitting Up Routes
03:33 -
Loading a Module Lazily
08:40 -
Moving the Auth Guard
02:37 -
Wrap Up
01:58
Using NgRx for State Management
-
Module Introduction
04:04 -
What is Redux – An Overview
01:59 -
NgRx Core Concepts – A First Example
14:40 -
Working with Multiple Reducers & Actions
12:36 -
Dispatching Actions & Selecting State Slices
04:37 -
Adding an Auth Reducer (and Actions)
09:51 -
Adding Auth Subscriptions
08:10 -
Adding the Training Reducer and Actions with Payloads
12:14 -
Lazy Loaded State
04:34 -
Dispatching Training Actions
05:16 -
Selecting Training State
06:33 -
Selecting Single Values Correctly
07:30 -
Connecting the Data Table
03:14 -
Cleaning the Project Up
03:40 -
Adding a small Bugfix
00:55 -
Wrap Up
01:02
Deploying the App
-
Introduction & Preparation
01:43 -
Deploying the App to Firebase Hosting
04:10
BONUS Angular Material Themes
-
Module Introduction
00:23 -
Understanding Angular Material Themes
01:38 -
Customising an Angular Material Theme
05:48
Round Up
-
Course Roundup
00:49
Earn a certificate
Add this certificate to your resume to demonstrate your skills & increase your chances of getting noticed.
Student Ratings & Reviews
No Review Yet
