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

Video description

This course will take you on a journey where you'll you will learn to build a real Angular app using Angular, Angular Material, AngularFire (+ Firebase with Firestore), and NgRx. Angular is an amazing frontend framework with which you can build powerful web applications; we will add real-time database functionalities and see our updates almost before we make them here. This course offers a brief refresher on Angular, a detailed introduction into Angular Material, and a realistic app that uses many Angular Material components.

What You Will Learn

  • Build amazing Angular apps with modern tools such as Material, NgRx, and AngularFire
  • Build real-time apps that not only work great but also look awesome
  • A realistic app that uses many Angular Material components
  • Examples of components such as 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


This course is designed for those who want to delve into Angular and build a real app with it, those who want to practice Angular, who want a practical guide to building Angular apps, and those who are interested in using Firebase, NgRx, and/or Angular Material.

About The Author

Academind by Maximilian Schwarzmüller:

Academind GmbH

Bundling the courses and the knowledge of successful instructors, Academind strives to deliver high-quality online education. The platform covers topics such as web development, data analysis, and more in a fun and engaging way.

Maximilian Schwarzmüller

Since the age of 13, he has never stopped learning new programming skills and languages. In his early days, he started creating websites simply for fun. This passion has remained and shaped his decision to work as a freelance web developer and consultant. Although he started web development on the backend (PHP with Laravel and NodeJS), he has progressed to becoming a front-end developer using modern frameworks such as React, Angular, and VueJS 2 in many projects.

The most rewarding experience for him is to see how people find new and better jobs, build exciting web applications, acquire amazing projects, or simply enjoy their hobby with the help of his content.

Publisher resources

Download Example Code

Table of contents

  1. Chapter 1 : Getting Started
    1. Welcome Introduction
    2. What's Inside the Course?
    3. How To Get The Most Out Of This Course
    4. Planning the App
  2. Chapter 2 : A Brief Angular Refresher (OPTIONAL)
    1. Module Introduction
    2. What is Angular?
    3. Project Setup with the Angular CLI
    4. How an Angular App Starts and Works
    5. Adding Components
    6. Template Syntax
    7. Using Directives like ngFor and ngIf
    8. Custom Property Event Binding
    9. Forms
    10. Understanding Services Dependency Injection
    11. Angular Routing
  3. Chapter 3 : Angular Material
    1. Module Introduction
    2. Understanding Angular Material Components
    3. Adding Angular Material to a Project
    4. Stay Up To Date!
    5. Our First Angular Material Component - The Button
    6. Creating the Course App Structure
    7. Working on The Signup Form
    8. Flexbox - A Quick Refresher
    9. Controlling the Layout with @angular/flex-layout
    10. Adding Configuring the Submit Button
    11. Implementing Hints and Validation Errors (on Forms)
    12. Adding a Datepicker
    13. Restricting Pickable Dates
    14. Adding a Checkbox
    15. Finishing the Form with Style
    16. Wrap Up
  4. Chapter 4 : Diving Deeper into Angular Material
    1. Module Introduction
    2. Adding Navigation a Sidenav
    3. Working on the Sidenav and Toolbar
    4. Styling the Sidenav
    5. Making the Page Responsive
    6. Adding Navigation Items
    7. Splitting the Navigation Into Components
    8. Working on the Welcome Screen
    9. Adding a Tabs Component
    10. Adding some "Cards"
    11. Adding a Dropdown Menu
    12. Adding a Spinner to the Training Screen
    13. Adding a Nice Exercise Timer
    14. Adding a Cancel Dialog Screen
    15. Passing Data to the Dialog
    16. Adding "Exit" and "Continue" Options
    17. Wrap Up
  5. Chapter 5 : Working with Data and Angular Material
    1. Module Introduction
    2. Important: RxJS 6
    3. Implementing Authentication
    4. Routing Authentication
    5. Route Protection
    6. Preparing the Exercise Data
    7. Injecting Using the Training Service
    8. Setting an Active Exercise
    9. Controlling the Active Exercise
    10. Adding a Form to the Training Component
    11. Handling the Active Training via a Service
    12. Handling "Complete" and "Cancel" Events
    13. Adding the Angular Material Data Table
    14. Adding Sorting to the Data Table
    15. Adding Filtering to the Data Table
    16. Adding Pagination to the Data Table
    17. Wrap Up
  6. Chapter 6 : Using Angularfire Firebase
    1. Module Introduction
    2. What is Firebase?
    3. Getting Started with Firebase
    4. What is Angularfire?
    5. RxJS Oservables Refresher
    6. Diving into Firebase
    7. Listening to Value Changes (of Firestore)
    8. Listening to Snapshot Changes (of Firestore, incl. Metadata)
    9. Restructuring the Code
    10. How Firebase Manages Subscriptions
    11. Storing Completed Exercises on Firestore
    12. Connecting the Data Table to Firestore
    13. Working with Documents
    14. Adding Real Authentication (Sign Up)
    15. Adding User Login
    16. Understanding Authentication in SPAs
    17. Configuring Firestore Security Rules
    18. Managing Firestore Subscriptions
    19. Reorganizing the Code
    20. Wrap Up
  7. Chapter 7 : Optimizing the App
    1. Module Introduction
    2. Style Improvements Error Handling
    3. Adding a Spinner
    4. Adding a Re-Usable Snackbar (Notification)
    5. Improving Error Handling
    6. Splitting the App Into Modules
    7. Optimizing Subscriptions
    8. Creating a SharedModule
    9. Splitting Up Routes
    10. Loading a Module Lazily
    11. Moving the Auth Guard
    12. Wrap Up
  8. Chapter 8 : Using NgRx for State Management
    1. Module Introduction
    2. What is Redux - An Overview
    3. NgRx Core Concepts - A First Example
    4. Working with Multiple Reducers Actions
    5. Dispatching Actions Selecting State Slices
    6. Adding an Auth Reducer (and Actions)
    7. Adding Auth Subscriptions
    8. Adding the Training Reducer and Actions with Payloads
    9. Lazy Loaded State
    10. Dispatching Training Actions
    11. Selecting Training State
    12. Selecting Single Values Correctly
    13. Connecting the Data Table
    14. Cleaning the Project Up
    15. Adding a small Bugfix
    16. Wrap Up
  9. Chapter 9 : Deploying the App
    1. Introduction Preparation
    2. Deploying the App to Firebase Hosting
  10. Chapter 10 : BONUS: Angular Material Themes
    1. Module Introduction
    2. Understanding Angular Material Themes
    3. Customising an Angular Material Theme
  11. Chapter 11 : BONUS: Angular Material Themes
    1. Course Roundup

Product information

  • Title: Angular (Full App) with Angular Material, Angularfire and NgRx
  • Author(s): Academind by Maximilian Schwarzmüller
  • Release date: October 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781789958829