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.

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

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