![Angular (Full App) with Angular Material, Angularfire and NgRx [Video]](https://static.packt-cdn.com/products/9781789958829/cover/smaller)
Angular (Full App) with Angular Material, Angularfire and NgRx [Video]
- FREE Subscription Read for free
- $125.99 Video Buy
- $12.99 Video + Subscription Buy
-
What do you get with a Packt Subscription?
- Instant access to this title and 7,500+ eBooks & Videos
- Constantly updated with 100+ new titles each month
- Breadth and depth in over 1,000+ technologies
-
Free ChapterGetting Started
-
A Brief Angular Refresher (OPTIONAL)
-
Angular Material
- Module Introduction
- Understanding Angular Material Components
- Adding Angular Material to a Project
- Stay Up To Date!
- Our First Angular Material Component - The Button
- Creating the Course App Structure
- Working on The Signup Form
- Flexbox - A Quick Refresher
- Controlling the Layout with @angular/flex-layout
- Adding & Configuring the Submit Button
- Implementing Hints and Validation Errors (on Forms)
- Adding a Datepicker
- Restricting Pickable Dates
- Adding a Checkbox
- Finishing the Form with Style
- Wrap Up
-
Diving Deeper into Angular Material
- Module Introduction
- Adding Navigation & a Sidenav
- Working on the Sidenav and Toolbar
- Styling the Sidenav
- Making the Page Responsive
- Adding Navigation Items
- Splitting the Navigation Into Components
- Working on the Welcome Screen
- Adding a Tabs Component
- Adding some "Cards"
- Adding a Dropdown Menu
- Adding a Spinner to the Training Screen
- Adding a Nice Exercise Timer
- Adding a Cancel Dialog Screen
- Passing Data to the Dialog
- Adding "Exit" and "Continue" Options
- Wrap Up
-
Working with Data and Angular Material
- Module Introduction
- Important: RxJS 6
- Implementing Authentication
- Routing & Authentication
- Route Protection
- Preparing the Exercise Data
- Injecting & Using the Training Service
- Setting an Active Exercise
- Controlling the Active Exercise
- Adding a Form to the Training Component
- Handling the Active Training via a Service
- Handling "Complete" and "Cancel" Events
- Adding the Angular Material Data Table
- Adding Sorting to the Data Table
- Adding Filtering to the Data Table
- Adding Pagination to the Data Table
- Wrap Up
-
Using Angularfire & Firebase
- Module Introduction
- What is Firebase?
- Getting Started with Firebase
- What is Angularfire?
- RxJS Oservables Refresher
- Diving into Firebase
- Listening to Value Changes (of Firestore)
- Listening to Snapshot Changes (of Firestore, incl. Metadata)
- Restructuring the Code
- How Firebase Manages Subscriptions
- Storing Completed Exercises on Firestore
- Connecting the Data Table to Firestore
- Working with Documents
- Adding Real Authentication (Sign Up)
- Adding User Login
- Understanding Authentication in SPAs
- Configuring Firestore Security Rules
- Managing Firestore Subscriptions
- Reorganizing the Code
- Wrap Up
-
Optimizing the App
-
Using NgRx for State Management
- Module Introduction
- NgRx Core Concepts - A First Example
- Working with Multiple Reducers & Actions
- Dispatching Actions & Selecting State Slices
- Adding an Auth Reducer (and Actions)
- Adding Auth Subscriptions
- Adding the Training Reducer and Actions with Payloads
- Lazy Loaded State
- Dispatching Training Actions
- Selecting Training State
- Selecting Single Values Correctly
- Connecting the Data Table
- Cleaning the Project Up
- Adding a small Bugfix
- Wrap Up
- What is Redux - An Overview
-
Deploying the App
-
BONUS: Angular Material Themes
-
BONUS: Angular Material Themes
About this video
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
- Publication date:
- October 2018
- Publisher
- Packt
- Duration
- 11 hours 30 minutes
- ISBN
- 9781789958829
Download code from GitHub