Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Angular (Full App) with Angular Material, Angularfire and NgRx
  • Table Of Contents Toc
Angular (Full App) with Angular Material, Angularfire and NgRx

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

By : Academind by Maximilian Schwarzmüller GmbH
Buy this Video
close
close
Angular (Full App) with Angular Material, Angularfire and NgRx

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

By: Academind by Maximilian Schwarzmüller GmbH
Buy this Video

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
Table of Contents (11 chapters)
close
close
close
1
Getting Started
Icon
Welcome & Introduction
Icon
What's Inside the Course?
Icon
How To Get The Most Out Of This Course
Icon
Planning the App
2
A Brief Angular Refresher (OPTIONAL)
chevron up
Icon
Module Introduction
Icon
What is Angular?
Icon
Project Setup with the Angular CLI
Icon
How an Angular App Starts and Works
Icon
Adding Components
Icon
Template Syntax
Icon
Using Directives like ngFor and ngIf
Icon
Custom Property & Event Binding
Icon
Forms
Icon
Understanding Services & Dependency Injection
Icon
Angular Routing
3
Angular Material
Icon
Module Introduction
Icon
Understanding Angular Material Components
Icon
Adding Angular Material to a Project
Icon
Stay Up To Date!
Icon
Our First Angular Material Component - The Button
Icon
Creating the Course App Structure
Icon
Working on The Signup Form
Icon
Flexbox - A Quick Refresher
Icon
Controlling the Layout with @angular/flex-layout
Icon
Adding & Configuring the Submit Button
Icon
Implementing Hints and Validation Errors (on Forms)
Icon
Adding a Datepicker
Icon
Restricting Pickable Dates
Icon
Adding a Checkbox
Icon
Finishing the Form with Style
Icon
Wrap Up
4
Diving Deeper into Angular Material
Icon
Module Introduction
Icon
Adding Navigation & a Sidenav
Icon
Working on the Sidenav and Toolbar
Icon
Styling the Sidenav
Icon
Making the Page Responsive
Icon
Adding Navigation Items
Icon
Splitting the Navigation Into Components
Icon
Working on the Welcome Screen
Icon
Adding a Tabs Component
Icon
Adding some "Cards"
Icon
Adding a Dropdown Menu
Icon
Adding a Spinner to the Training Screen
Icon
Adding a Nice Exercise Timer
Icon
Adding a Cancel Dialog Screen
Icon
Passing Data to the Dialog
Icon
Adding "Exit" and "Continue" Options
Icon
Wrap Up
5
Working with Data and Angular Material
Icon
Module Introduction
Icon
Important: RxJS 6
Icon
Implementing Authentication
Icon
Routing & Authentication
Icon
Route Protection
Icon
Preparing the Exercise Data
Icon
Injecting & Using the Training Service
Icon
Setting an Active Exercise
Icon
Controlling the Active Exercise
Icon
Adding a Form to the Training Component
Icon
Handling the Active Training via a Service
Icon
Handling "Complete" and "Cancel" Events
Icon
Adding the Angular Material Data Table
Icon
Adding Sorting to the Data Table
Icon
Adding Filtering to the Data Table
Icon
Adding Pagination to the Data Table
Icon
Wrap Up
6
Using Angularfire & Firebase
Icon
Module Introduction
Icon
What is Firebase?
Icon
Getting Started with Firebase
Icon
What is Angularfire?
Icon
RxJS Oservables Refresher
Icon
Diving into Firebase
Icon
Listening to Value Changes (of Firestore)
Icon
Listening to Snapshot Changes (of Firestore, incl. Metadata)
Icon
Restructuring the Code
Icon
How Firebase Manages Subscriptions
Icon
Storing Completed Exercises on Firestore
Icon
Connecting the Data Table to Firestore
Icon
Working with Documents
Icon
Adding Real Authentication (Sign Up)
Icon
Adding User Login
Icon
Understanding Authentication in SPAs
Icon
Configuring Firestore Security Rules
Icon
Managing Firestore Subscriptions
Icon
Reorganizing the Code
Icon
Wrap Up
7
Optimizing the App
Icon
Module Introduction
Icon
Style Improvements & Error Handling
Icon
Adding a Spinner
Icon
Adding a Re-Usable Snackbar (Notification)
Icon
Improving Error Handling
Icon
Splitting the App Into Modules
Icon
Optimizing Subscriptions
Icon
Creating a SharedModule
Icon
Splitting Up Routes
Icon
Loading a Module Lazily
Icon
Moving the Auth Guard
Icon
Wrap Up
8
Using NgRx for State Management
Icon
Module Introduction
Icon
NgRx Core Concepts - A First Example
Icon
Working with Multiple Reducers & Actions
Icon
Dispatching Actions & Selecting State Slices
Icon
Adding an Auth Reducer (and Actions)
Icon
Adding Auth Subscriptions
Icon
Adding the Training Reducer and Actions with Payloads
Icon
Lazy Loaded State
Icon
Dispatching Training Actions
Icon
Selecting Training State
Icon
Selecting Single Values Correctly
Icon
Connecting the Data Table
Icon
Cleaning the Project Up
Icon
Adding a small Bugfix
Icon
Wrap Up
Icon
What is Redux - An Overview
9
Deploying the App
Icon
Introduction & Preparation
Icon
Deploying the App to Firebase Hosting
10
BONUS: Angular Material Themes
Icon
Module Introduction
Icon
Understanding Angular Material Themes
Icon
Customising an Angular Material Theme
11
BONUS: Angular Material Themes
Icon
Course Roundup
You're currently viewing a free sample. Access the full title and Packt library for free now with a free trial.
Chapter: 2
A Brief Angular Refresher (OPTIONAL)
Icon This video is locked
Icon
Icon
0:00
2.0x
1.5x
1.25x
1.0x
0.5x
caption settings
caption off
Icon Icon
ShowHide Transcripts Icon
Section: 5
Adding Components
This video shows how to add Components.
Visually different images
CONTINUE WATCHING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Angular (Full App) with Angular Material, Angularfire and NgRx
End of Section 2
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options
font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon