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

Preview Online

Code Files

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

Maximilian Schwarzmüller

Friday, October 26, 2018

New Release!

Use Angular, Angular Material, AngularFire (+ Firebase with Firestore), and NgRx to build a real Angular app

Quick links: > Table of contents > What will you learn? > Preview

Mapt Subscription

FREE

€29.73/m after trial

Video

€109.24

RRP €128.50

Save 14%

What do I get with a Mapt subscription?

Unlimited access to all Packt’s 6,000+ eBooks and Videos
100+ new titles a month, learning paths, assessments & code files
1 Free eBook or Video to download and keep every month after trial

What do I get with an eBook?

Download this book in EPUB, PDF, MOBI formats
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the subscription reader

What do I get with Print & eBook?

Get a paperback copy of the book delivered to you
Download this book in EPUB, PDF, MOBI formats
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the subscription reader

What do I get with a Video?

Download this Video course in MP4 format
DRM FREE - read and interact with your content when you want, where you want, and how you want
Access this title in the subscription reader

€0.00

€109.24

€29.74 p/m after trial

RRP €128.50

Subscription

Video

Start 14 Day Trial

Frequently bought together

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

€ 128.50

€ 109.24

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

Oct 2018

10 hours 26 minutes

€ 109.24

Architecting Angular Applications with Redux, RxJS, and NgRx

€ 35.68

€ 24.99

Architecting Angular Applications with Redux, RxJS, and NgRx

Mar 2018

364 pages

€ 24.99

Buy 2 for €35.42
Save €108.20

Add to Cart

Video Details

ISBN 13 9781789958829

Course Length 10 hours 26 minutes

Getting Started

Welcome & Introduction

What's Inside the Course?

How To Get The Most Out Of This Course

Planning the App

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

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

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

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

Introduction & Preparation

Deploying the App to Firebase Hosting

BONUS: Angular Material Themes

Module Introduction

Understanding Angular Material Themes

Customising an Angular Material Theme

BONUS: Angular Material Themes

Course Roundup

Video Description

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

Style and Approach

This exhaustive course packed with step-by-step instructions, working examples, and helpful advice is divided into clear chunks so you can learn at your own pace, build entire apps, and see how it all works in practice. Basic HTML, JS, and CSS knowledge is required and a brief introduction/ refresher module is provided in this course.

Video Preview

What You Will Learn

Build amazing Angular apps with modern tools such as Material, NgRx, and AngularFire
Build real-time apps that not only work great but also look awesome
A realistic app that uses many Angular Material components
Examples of components such as Datepickers, Sidenavs, or the Material Data Table (incl. sorting, filtering, and live updating!)
A real-time database connection powered by Firebase (using Firestore) and AngularFire
A better understanding of RxJS observables
State-of-the-art state management with the help of NgRx

Authors

Maximilian Schwarzmüller

Academind GmbH - Online Education

Bundling the courses and knowhow of successful instructors, Academind strives to deliver high-quality online education. Online Education, Real-Life Success—that's what Academind stands for. Learn topics like web development, data analysis, and more in a fun and engaging way.

Maximilian Schwarzmüller - Professional Web Developer and Instructor

Since the age of 13, Maximilian Schwarzmüller has never stopped learning new programming skills and languages. In the early days, he started creating websites for friends and for fun. This passion has remained and shaped his decision to work as a freelance web developer and consultant. The success and fun he has in this job is immense and really keeps that passion alive. Although he started web development on the back end (PHP with Laravel and NodeJS), he has increasingly become a front-end developer using modern frameworks such as React, Angular, or VueJS 2 in a lot of projects. He loves both worlds nowadays! As a self-taught developer, he had broadened his horizon by studying Business Administration, resulting in a Master's degree. This enabled him to work in a major strategy consultancy as well as a bank. Whilst learning and developing his skills, he realized that he enjoyed development more than these fields.

As a self-taught professional, Max is familiar with the difficult topics when learning new or improving on already-known languages. This background and experience enables him to focus on the most relevant key concepts and topics. His track record is the best proof of that. Whether working as development instructor or teaching Business Administration, he always receives great feedback. The most rewarding experience is to see how people find new and better jobs, build awesome web applications, acquire amazing projects, or simply enjoy their hobby with the help of his content.

Getting Started

Welcome & Introduction

What's Inside the Course?

How To Get The Most Out Of This Course

Planning the App

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