O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

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

by Maximilian Schwarzmüller
Publisher: Packt Publishing
Release Date: October 2018
ISBN: 9781789958829
View table of contents
Start watching

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.

The code bundle for this video course is available at https://github.com/PacktPublishing/Angular-Full-App-with-Angular-Material-Angularfire-and-NgRx

Table of Contents

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