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

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

  • Maximilian Schwarzmüller
  • 4.69
  • (7677 reviews)
  • 11 hrs
  • 140 lectures
  • Udemy
Angular (Full App) with Angular Material, Angularfire & NgRx

What you will 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!

Your trainer

Maximilian Schwarzmüller

Starting out at the age of 13 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. Besides web development I also explored Python and other non-web-only languages. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.

Starting web development on the backend (PHP with Laravel, NodeJS, Python) I also became more and more of a frontend developer using modern frameworks like React, Angular or VueJS 2 in a lot of projects. I love both worlds nowadays!

140 lessons

Easy to follow lectures and videos covering subject details.

11 hours

This course includes hours of video material. Watch on-demand, anytime, anywhere.

Certificate of Completion

You will earn a Certificate of Completion at the end of this course.

Course curriculum

Getting Started08:52

  • Welcome & Introduction02:14
  • What's Inside the Course?02:24
  • Join our Online Learning Community00:22
  • How To Get The Most Out Of This Course02:15
  • Planning the App01:37

  • Module Introduction00:46
  • What is Angular?04:22
  • MUST READ: Angular CLI - Latest Version00:50
  • Project Setup with the Angular CLI04:24
  • How an Angular App Starts and Works05:39
  • Adding Components05:46
  • Template Syntax07:00
  • Using Directives like ngFor and ngIf04:22
  • Custom Property & Event Binding07:13
  • Forms04:17
  • Understanding Services & Dependency Injection11:10
  • Angular Routing06:52
  • Where to Dive Deeper00:30
  • Useful Resources & Links00:02

  • Module Introduction03:17
  • Understanding Angular Material Components03:03
  • Adding Angular Material to a Project13:13
  • Stay Up To Date!00:52
  • Our First Angular Material Component - The Button10:11
  • Why Do We Have To Import Everything Separately?00:24
  • Creating the Course App Structure07:54
  • Working on The Signup Form05:04
  • Flexbox - A Quick Refresher09:43
  • Controlling the Layout with @angular/flex-layout06:05
  • Adding & Configuring the Submit Button05:06
  • Implementing Hints and Validation Errors (on Forms)09:38
  • Adding a Datepicker09:18
  • Restricting Pickable Dates03:27
  • Adding a Checkbox04:28
  • Finishing the Form with Style02:31
  • Time to Practice - Angular Material1 question
  • Wrap Up01:26
  • Useful Resources & Links00:04

  • Module Introduction00:39
  • Adding Navigation & a Sidenav09:13
  • Working on the Sidenav and Toolbar05:13
  • Styling the Sidenav09:09
  • Making the Page Responsive05:08
  • Adding Navigation Items09:39
  • Splitting the Navigation Into Components09:39
  • Working on the Welcome Screen04:37
  • Adding a Tabs Component04:40
  • Adding some "Cards"06:20
  • Adding a Dropdown Menu06:00
  • Adding a Spinner to the Training Screen09:16
  • Adding a Nice Exercise Timer03:21
  • Adding a Cancel Dialog Screen06:11
  • Passing Data to the Dialog06:34
  • Adding "Exit" and "Continue" Options03:07
  • Wrap Up01:12
  • Useful Resources & Links00:04

  • Module Introduction00:47
  • Important: RxJS 601:11
  • IMPORTANT: Install rxjs-compat00:13
  • Code without rxjs-compat00:33
  • Implementing Authentication18:37
  • Time to Practice - Angular Material & Data1 question
  • Routing & Authentication04:38
  • Route Protection06:54
  • Preparing the Exercise Data04:12
  • Injecting & Using the Training Service04:34
  • Setting an Active Exercise03:14
  • Controlling the Active Exercise04:35
  • Adding a Form to the Training Component03:21
  • Handling the Active Training via a Service04:53
  • RxJS 6 Update00:11
  • Handling "Complete" and "Cancel" Events06:10
  • Adding the Angular Material Data Table14:07
  • Adding Sorting to the Data Table06:08
  • Adding Filtering to the Data Table05:20
  • Data Table Filtering++00:42
  • Adding Pagination to the Data Table05:33
  • Wrap Up00:51
  • Useful Resources & Links00:01

  • Module Introduction00:59
  • What is Firebase?04:41
  • Getting Started with Firebase02:26
  • What is Angularfire?02:07
  • RxJS Observables Refresher06:24
  • Diving into Firebase07:36
  • Listening to Value Changes (of Firestore)12:24
  • Operators & RxJS 600:31
  • Listening to Snapshot Changes (of Firestore, incl. Metadata)07:21
  • Restructuring the Code06:27
  • How Firebase Manages Subscriptions02:52
  • Storing Completed Exercises on Firestore03:56
  • Connecting the Data Table to Firestore07:35
  • Working with Documents05:03
  • Adding Real Authentication (Sign Up)05:38
  • Adding User Login01:51
  • Understanding Authentication in SPAs04:02
  • Configuring Firestore Security Rules04:15
  • Managing Firestore Subscriptions05:31
  • Reorganizing the Code04:22
  • Wrap Up01:02
  • Useful Resources & Links00:03

  • Module Introduction00:50
  • Style Improvements & Error Handling05:26
  • Adding a Spinner10:28
  • Time to Practice - Optimizations1 question
  • Adding a Re-Usable Snackbar (Notification)03:05
  • Improving Error Handling06:07
  • Splitting the App Into Modules07:00
  • Time to Practice - Modules1 question
  • Optimizing Subscriptions03:26
  • Creating a SharedModule04:40
  • Splitting Up Routes03:33
  • Loading a Module Lazily10:19
  • Moving the Auth Guard02:37
  • Wrap Up01:58
  • Useful Resources & Links00:02

  • Module Introduction04:04
  • What is Redux - An Overview01:59
  • NgRx Core Concepts - A First Example14:39
  • Working with Multiple Reducers & Actions12:35
  • Dispatching Actions & Selecting State Slices04:37
  • Time to Practice - NgRx1 question
  • What's Up with the RxJS Import Syntax?00:47
  • Adding an Auth Reducer (and Actions)09:51
  • Adding Auth Subscriptions08:09
  • Adding the Training Reducer and Actions with Payloads12:14
  • Lazy Loaded State04:34
  • Dispatching Training Actions05:16
  • Selecting Training State06:33
  • Selecting Single Values Correctly07:30
  • Connecting the Data Table03:14
  • Cleaning the Project Up03:40
  • Adding a small Bugfix00:55
  • Wrap Up01:02
  • Useful Resources & Links00:02

  • Introduction & Preparation01:43
  • Deploying the App to Firebase Hosting04:10
  • Useful Resources & Links00:02

  • Module Introduction00:23
  • Understanding Angular Material Themes01:38
  • Adding the Theme with Angular 600:28
  • Customising an Angular Material Theme05:48
  • Useful Resources & Links00:01

  • Course Roundup00:55
  • Bonus: More Content!00:20
Enroll now
Online Courses

Learning Angular doesn't have to be hard. Here is our curated list of recommended online courses that will guide you step-by-step in the learning process.

Learn more
Books

Are you an avid book reader? Do you prefer paperback, or maybe Kindle version? Take a look at our curated list of Angular related books and take yourskills to the next level.

Learn more
YouTube videos

The number of high-quality and free Angular video tutorials is growing fast. Check this curated list of recommended videos - there is no excuse to stop learning.

Learn more