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

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

4.62 (8309 reviews)
Udemy
platform
English
language
Web Development
category
Angular (Full App) with Angular Material, Angularfire & NgRx
44,832
students
11.5 hours
content
Nov 2022
last update
$109.99
regular price

What you will learn

Build amazing Angular apps with modern tools like Material, NgRx and Angularfire

Build real-time apps that not only work great but also look awesome!

Why take this course?

Angular is an amazing frontend JavaScript & TypeScript framework with which you can build powerful web applications.

There are many courses that dive deeply into Angular but sometimes you just want to build an entire app and see how it all works in practice. And you want to use all these great third-party packages that can add a lot of awesome functionalities to your Angular app!

This course covers exactly that!

We'll build an entire, realistic app which looks absolutely beautiful, uses Google's Material Design and is extremely fast! Thanks to Firebase and Angularfire, we'll add real-time database functionalities and see our updates almost before we make them!

Behind the scenes, NgRx will be used - a Redux-inspired state management solution that can greatly enhance your Angular app.

What are you waiting for, this is what you'll get in detail:

  • A brief refresher on Angular, just in case you forgot how it works (or never learned it)

  • A detailed introduction into Angular Material, its docs and its usage

  • A realistic app that uses many Angular Material components

  • Examples for components like 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

  • And so much more!

This course is for you if you want to practice Angular, want to see it in action or want to learn it with the help of a 100% practical project!

Content

Getting Started

Welcome & Introduction
What's Inside the Course?
Join our Online Learning Community
How To Get The Most Out Of This Course
Planning the App

A Brief Angular Refresher (OPTIONAL)

Module Introduction
What is Angular?
MUST READ: Angular CLI - Latest Version
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
Where to Dive Deeper
Useful Resources & Links

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
Why Do We Have To Import Everything Separately?
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
Useful Resources & Links

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
Useful Resources & Links

Working with Data and Angular Material

Module Introduction
Important: RxJS 6
IMPORTANT: Install rxjs-compat
Code without rxjs-compat
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
RxJS 6 Update
Handling "Complete" and "Cancel" Events
Adding the Angular Material Data Table
Adding Sorting to the Data Table
Adding Filtering to the Data Table
Data Table Filtering++
Adding Pagination to the Data Table
Wrap Up
Useful Resources & Links

Using Angularfire & Firebase

Module Introduction
What is Firebase?
Getting Started with Firebase
What is Angularfire?
RxJS Observables Refresher
Diving into Firebase
Listening to Value Changes (of Firestore)
Operators & RxJS 6
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
Useful Resources & Links

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
Useful Resources & Links

Using NgRx for State Management

Module Introduction
What is Redux - An Overview
NgRx Core Concepts - A First Example
Working with Multiple Reducers & Actions
Dispatching Actions & Selecting State Slices
What's Up with the RxJS Import Syntax?
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
Useful Resources & Links

Deploying the App

Introduction & Preparation
Deploying the App to Firebase Hosting
Useful Resources & Links

BONUS: Angular Material Themes

Module Introduction
Understanding Angular Material Themes
Adding the Theme with Angular 6
Customising an Angular Material Theme
Useful Resources & Links

Round Up

Course Roundup
Bonus: More Content!

Screenshots

Angular (Full App) with Angular Material, Angularfire & NgRx - Screenshot_01Angular (Full App) with Angular Material, Angularfire & NgRx - Screenshot_02Angular (Full App) with Angular Material, Angularfire & NgRx - Screenshot_03Angular (Full App) with Angular Material, Angularfire & NgRx - Screenshot_04

Our review

🏆 **Overall Course Review** The course has received a wide range of feedback, with several key points highlighted by recent reviewers. Here's a breakdown of the general consensus: ### Pros: - **Excellent Teaching**: Maximilian's teaching style is consistently praised for being clear, in-depth, and engaging. The way topics are explained contributes to a strong understanding of Angular and its associated technologies. - **Comprehensive Content**: The course covers almost everything related to Angular Material, making it a one-stop-shop for learning this framework. - **Helpful Teaching Assistants**: The support provided by the teaching assistants is noted to be highly effective in resolving queries and issues encountered during the course. - **Real-World Application**: Many reviewers appreciate the practical nature of the course, which helps in building real knowledge and applying it to actual projects. - **Coding Along**: The ability to code along with the instructor is a positive aspect, allowing learners to apply concepts in real-time and solidify their learning experience. ### Cons: - **Outdated Content**: A significant concern raised by multiple reviewers is that the course content is outdated, particularly in areas such as Angular version 14 and above, Firebase implementation, and Material theming. This can lead to frustration for learners trying to follow along with the latest versions of these technologies. - **Dependency Issues**: Some reviewers mention encountering dependency issues due to the use of default package versions, which could have been mitigated by using exact versions as recommended. - **Technology Evolution**: Given that technology evolves rapidly, some techniques covered in the course may no longer be the best practices to learn. This includes some aspects of Angular Material and responsivity/layout approaches. - **Compatibility Challenges**: Angular's frequent updates mean that some parts of the course are not compatible with newer versions, leading to a less smooth learning experience. ### Recommendations for Future Updates: - **Consistent Updates**: Regularly updating the course content to keep pace with Angular and Firebase developments is crucial. - **Source Code Availability**: Providing source code for tasks could enhance the learning experience and allow learners to reference working examples. - **Strict Moding Practice**: Encouraging or incorporating strict typing from the outset would align the course with modern development practices. ### Final Verdict: The course is highly recommended for its teaching quality and comprehensive coverage of Angular and Angular Material. However, it's essential to consider the outdated content and potential compatibility issues before beginning the course. Learners should be prepared to complement the course material with additional research or resources to stay current with Angular's latest features and best practices. If you're a beginner, this course can provide a solid foundation in Angular, but make sure to double-check the implementation of technologies like Firebase against the most recent documentation or seek out supplementary, up-to-date resources. For intermediate learners who are familiar with Angular's evolution, this course remains an excellent resource for clearing up concepts and applying them practically.

Coupons

DateDiscountStatus
11/19/202287% OFF
expired
1/23/202385% OFF
expired
6/4/202384% OFF
expired

Charts

Price

Angular (Full App) with Angular Material, Angularfire & NgRx - Price chart

Rating

Angular (Full App) with Angular Material, Angularfire & NgRx - Ratings chart

Enrollment distribution

Angular (Full App) with Angular Material, Angularfire & NgRx - Distribution chart

Related Topics

1512962
udemy ID
1/16/2018
course created date
6/30/2019
course indexed date
Bot
course submited by