Pro Members
Pro Members

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

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

  • 11 sections, 150 lectures
  • Total duration: 11h 11m
Start NowEnrollment Options
Angular (Full App) with Angular Material, Angularfire & NgRx

Course Overview

About This Course

You already know some Angular—or you’ve tried to learn it—but building a full app can still feel like a pile of disconnected tutorials. You want something realistic that actually looks good, not another bare-bones demo.

In this course, you’ll follow a single, end-to-end build that shows how a complete Angular app comes together when you add the tools people use in real projects. You’ll get a short refresher when needed, then move quickly into a practical workflow where each step has a clear purpose and visible payoff.

By the end, you’ll be able to create a polished Angular application that feels fast and responsive, updates in real time, and stays maintainable as it grows. You’ll know how to structure features, connect your UI to live data, and keep complex app behavior predictable instead of fragile.

What You'll Learn

You’ll combine Angular Material, Firebase/Firestore via Angularfire, and NgRx to ship a realistic Angular app with real-time data and a clean UI.

  • Build polished UIs

    Create an Angular app that follows Google’s Material Design and looks professional out of the box. You’ll be able to choose, configure, and compose Material components to match real product screens.

  • Use key Material components

    Implement common UI building blocks like Datepicker, Sidenav, and the Material Data Table. You’ll be able to add sorting, filtering, and live-updating table behavior without hacking together custom widgets.

  • Connect to Firestore

    Wire your app to a real-time database using Firebase with Firestore through Angularfire. You’ll be able to read and write data so changes show up immediately in the UI.

  • Work confidently with RxJS

    Strengthen your understanding of RxJS observables so async data and UI updates feel predictable. You’ll be able to reason about streams coming from your backend and your components.

  • Manage state with NgRx

    Add Redux-inspired state management using NgRx to keep larger app flows organized. You’ll be able to centralize state changes and avoid scattered, hard-to-debug component logic.

  • Apply Angular in practice

    Use the included refresher module to fill gaps, then apply Angular concepts directly in a full app build. You’ll be able to move from “I know the basics” to “I can ship a complete app.”

Ready to get started?

See enrollment options

Prerequisites

  • Basic Angular knowledge, or the willingness to learn it along the way (a short refresher module is included).

  • Basic HTML, JavaScript, and CSS knowledge.

  • No prior Material Design knowledge required.

Who Is This Course For?

  • Angular learners

    You’ve learned Angular fundamentals but haven’t seen how a full application comes together. You want one realistic build you can follow to connect the dots.

  • Practice-focused students

    You’re tired of theory-heavy explanations and want to get your hands on a complete project. You learn best when every concept immediately shows up in a working app.

  • Tool-curious developers

    You want to try Angular Material, Firebase/Angularfire, and NgRx in a single app so you can judge how they fit together. You’re looking for a practical path, not scattered docs and snippets.

Curriculum Overview

Start Now

Preview the structure and pacing of this course before you begin.

  • Getting Started6 lectures8m
    • 01Welcome & Introduction2:12 min
    • 02What's Inside the Course?2:24 min
    • 03Join our Online Learning Community0:00 min
    • 04How To Get The Most Out Of This Course2:15 min
    • 05Planning the App1:37 min
    • 06The Academind Pro Referral Program0:00 min
  • A Brief Angular Refresher (OPTIONAL)14 lectures1h 2m
    • 01Module Introduction0:46 min
    • 02What is Angular?4:22 min
    • 03MUST READ: Angular CLI - Latest Version0:00 min
    • 04Project Setup with the Angular CLI4:23 min
    • 05How an Angular App Starts and Works5:39 min
    • 06Adding Components5:46 min
    • 07Template Syntax7:00 min
    • 08Using Directives like ngFor and ngIf4:22 min
    • 09Custom Property & Event Binding7:13 min
    • 10Forms4:17 min
    • 11Understanding Services & Dependency Injection11:10 min
    • 12Angular Routing6:52 min
    • 13Where to Dive Deeper0:30 min
    • 14Useful Resources & Links0:00 min
  • Angular Material20 lectures1h 47m
    • 01Module Introduction3:17 min
    • 02Understanding Angular Material Components3:03 min
    • 03Adding Angular Material to a Project13:13 min
    • 04Stay Up To Date!0:52 min
    • 05Our First Angular Material Component - The Button10:11 min
    • 06Why Do We Have To Import Everything Separately?0:00 min
    • 07Creating the Course App Structure7:54 min
    • 08Working on The Signup Form5:04 min
    • 09Flexbox - A Quick Refresher9:43 min
    • 10Controlling the Layout with @angular/flex-layout6:05 min
    • 11Adding & Configuring the Submit Button5:06 min
    • 12Implementing Hints and Validation Errors (on Forms)9:38 min
    • 13Adding a Datepicker9:17 min
    • 14Restricting Pickable Dates3:27 min
    • 15Adding a Checkbox4:28 min
    • 16Finishing the Form with Style2:31 min
    • 17Assignment - Angular Material (Problem)1:34 min
    • 18Assignment - Angular Material (Solution)11:03 min
    • 19Wrap Up1:26 min
    • 20Useful Resources & Links0:00 min
  • Diving Deeper into Angular Material18 lectures1h 39m
    • 01Module Introduction0:39 min
    • 02Adding Navigation & a Sidenav9:13 min
    • 03Working on the Sidenav and Toolbar5:13 min
    • 04Styling the Sidenav9:08 min
    • 05Making the Page Responsive5:08 min
    • 06Adding Navigation Items9:39 min
    • 07Splitting the Navigation Into Components9:39 min
    • 08Working on the Welcome Screen4:37 min
    • 09Adding a Tabs Component4:40 min
    • 10Adding some "Cards"6:20 min
    • 11Adding a Dropdown Menu6:00 min
    • 12Adding a Spinner to the Training Screen9:16 min
    • 13Adding a Nice Exercise Timer3:21 min
    • 14Adding a Cancel Dialog Screen6:11 min
    • 15Passing Data to the Dialog6:34 min
    • 16Adding "Exit" and "Continue" Options3:07 min
    • 17Wrap Up1:12 min
    • 18Useful Resources & Links0:00 min
  • Working with Data and Angular Material24 lectures1h 38m
    • 01Module Introduction0:47 min
    • 02Important: RxJS 61:11 min
    • 03IMPORTANT: Install rxjs-compat0:00 min
    • 04Code without rxjs-compat0:00 min
    • 05Implementing Authentication18:37 min
    • 06Assignment - Angular Material & Data (Problem)0:34 min
    • 07Assignment - Angular Material & Data (Solution)3:20 min
    • 08Routing & Authentication4:38 min
    • 09Route Protection6:54 min
    • 10Preparing the Exercise Data4:12 min
    • 11Injecting & Using the Training Service4:34 min
    • 12Setting an Active Exercise3:14 min
    • 13Controlling the Active Exercise4:35 min
    • 14Adding a Form to the Training Component3:21 min
    • 15Handling the Active Training via a Service4:53 min
    • 16RxJS 6 Update0:00 min
    • 17Handling "Complete" and "Cancel" Events6:10 min
    • 18Adding the Angular Material Data Table14:07 min
    • 19Adding Sorting to the Data Table6:08 min
    • 20Adding Filtering to the Data Table5:20 min
    • 21Data Table Filtering++0:00 min
    • 22Adding Pagination to the Data Table5:33 min
    • 23Wrap Up0:51 min
    • 24Useful Resources & Links0:00 min
  • Using Angularfire & Firebase22 lectures1h 36m
    • 01Module Introduction0:59 min
    • 02What is Firebase?4:40 min
    • 03Getting Started with Firebase2:26 min
    • 04What is Angularfire?2:07 min
    • 05RxJS Observables Refresher6:24 min
    • 06Diving into Firebase7:35 min
    • 07Connecting the App with AngularFire12:23 min
    • 08Operators & RxJS 60:00 min
    • 09Listening to Snapshot Changes (of Firestore, incl. Metadata)7:21 min
    • 10Restructuring the Code6:27 min
    • 11How Firebase Manages Subscriptions2:52 min
    • 12Storing Completed Exercises on Firestore3:56 min
    • 13Connecting the Data Table to Firestore7:35 min
    • 14Working with Documents5:03 min
    • 15Adding Real Authentication (Sign Up)5:38 min
    • 16Adding User Login1:51 min
    • 17Understanding Authentication in SPAs4:02 min
    • 18Configuring Firestore Security Rules4:15 min
    • 19Managing Firestore Subscriptions5:31 min
    • 20Reorganizing the Code4:22 min
    • 21Wrap Up1:02 min
    • 22Useful Resources & Links0:00 min
  • Optimizing the App17 lectures1h 11m
    • 01Module Introduction0:50 min
    • 02Style Improvements & Error Handling5:26 min
    • 03Adding a Spinner10:28 min
    • 04Assignment - Optimizations (Problem)0:49 min
    • 05Assignment - Optimizations (Solution)5:23 min
    • 06Adding a Re-Usable Snackbar (Notification)3:05 min
    • 07Improving Error Handling6:07 min
    • 08Splitting the App Into Modules7:00 min
    • 09Assignment - Modules (Problem)0:42 min
    • 10Assignment - Modules (Solution)5:17 min
    • 11Optimizing Subscriptions3:26 min
    • 12Creating a SharedModule4:40 min
    • 13Splitting Up Routes3:33 min
    • 14Loading a Module Lazily10:19 min
    • 15Moving the Auth Guard2:37 min
    • 16Wrap Up1:58 min
    • 17Useful Resources & Links0:00 min
  • Using NgRx for State Management20 lectures1h 50m
    • 01Module Introduction4:04 min
    • 02What is Redux - An Overview1:59 min
    • 03NgRx Core Concepts - A First Example14:39 min
    • 04Working with Multiple Reducers & Actions12:35 min
    • 05Dispatching Actions & Selecting State Slices4:37 min
    • 06Assignment - NgRx (Problem)0:54 min
    • 07Assignment - NgRx (Solution)9:04 min
    • 08What's Up with the RxJS Import Syntax?0:00 min
    • 09Adding an Auth Reducer (and Actions)9:51 min
    • 10Adding Auth Subscriptions8:09 min
    • 11Adding the Training Reducer and Actions with Payloads12:14 min
    • 12Lazy Loaded State4:34 min
    • 13Dispatching Training Actions5:16 min
    • 14Selecting Training State6:33 min
    • 15Selecting Single Values Correctly7:30 min
    • 16Connecting the Data Table3:14 min
    • 17Cleaning the Project Up3:40 min
    • 18Adding a small Bugfix0:54 min
    • 19Wrap Up1:02 min
    • 20Useful Resources & Links0:00 min

And 3 more sections in the full course.

Ready to Get Started?

Choose the option that works best for you.

Single Course

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

One Payment. Lifetime Access.

$69one-time

  • One-time payment
  • All future updates for this course
  • Downloadable resources & code
  • Certificate of completion
  • Hands-on exercises & projects
  • Self-paced learning
  • English captions on all videos
  • Lifetime access
Buy Angular Full App

Single course license

Most Popular

All-Access Membership

Everything we teach. One subscription.

$25/mo

$4,729+ worth of courses

  • Full access to all courses
  • All future courses included
  • Downloadable resources & code
  • Certificates of completion
  • Hands-on exercises & projects
  • Self-paced learning
  • English captions on all videos
  • Cancel anytime
Subscribe Now

61 courses included

30-day money-back guarantee · All prices incl. VAT