Book Image

Angular (Full App) with Angular Material, Angularfire and NgRx [Video]

By : Academind by Maximilian Schwarzmüller
Book Image

Angular (Full App) with Angular Material, Angularfire and NgRx [Video]

By: Academind by Maximilian Schwarzmüller

Overview of this book

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

Related Content you might be interested in

Current Title:

Small book image
Angular (Full App) with Angular Material, Angularfire and NgRx [Video]
Academind by Maximilian Schwarzmüller
Oct, 2018 | 11 hours 30 minutes
No titles found
Table of Contents (11 chapters)
Free Chapter
1
Getting Started
Welcome & Introduction
What's Inside the Course?
How To Get The Most Out Of This Course
Planning the App
2
A Brief Angular Refresher (OPTIONAL)
Module Introduction
What is Angular?
Project Setup with the Angular CLI
How an Angular App Starts and Works
Adding Components
Template Syntax
Using Directives like ngFor and ngIf
Custom Property & Event Binding
Forms
Understanding Services & Dependency Injection
Angular Routing
3
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
4
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
5
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
6
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
7
Optimizing the App
Module Introduction
Style Improvements & Error Handling
Adding a Spinner
Adding a Re-Usable Snackbar (Notification)
Improving Error Handling
Splitting the App Into Modules
Optimizing Subscriptions
Creating a SharedModule
Splitting Up Routes
Loading a Module Lazily
Moving the Auth Guard
Wrap Up
8
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
9
Deploying the App
Introduction & Preparation
Deploying the App to Firebase Hosting
10
BONUS: Angular Material Themes
Module Introduction
Understanding Angular Material Themes
Customising an Angular Material Theme
11
BONUS: Angular Material Themes
Course Roundup
Chapter 5
Working with Data and Angular Material
Content Locked
Section 13
Adding the Angular Material Data Table
This video shows to add the Angular Material Data Table which allows us to do just that.
Previous Section
End of Section 13
Next Section