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

Video description

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

About This Video

  • Learn to build Angular apps with Material, NgRx and Angularfire
  • A Practical course designed for building Angular apps.

In Detail

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.

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): Maximilian Schwarzmüller
  • Release date: October 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781789958829