by Maximilian Schwarzmüller | Publisher: Packt Publishing | Release Date: October 2018 | ISBN: 9781789958829

Use Angular, Angular Material, AngularFire (+ Firebase with Firestore), and NgRx to build a real Angular appAbout This VideoLearn to build Angular apps with Material, NgRx and AngularfireA Practical course designed for building Angular apps.In DetailThis 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

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