NgRx (with NgRx Data) - The Complete Guide (…

This course is a complete guide to the new NgRx Ecosystem, including NgRx Data, Store, Effects, Router Store, NgRx Entity, and DevTools, and comes with a running Github repo

This Course in a Nutshell

State management is the number one topic to know when it comes to frontend architecture design choices. Why choose to do state management in a single page application, when to do it and why, what are the benefits, and what are tradeoffs?

These are all critical questions that we will address in this course, as we give you an extended guided tour of the NgRx Ecosystem.

The most popular state management library in the Angular space is NgRx, and for good reasons. The latest release of NgRx is probably one of the most important releases in the whole Angular ecosystem recently. Although backward compatible, it contains so much new functionality that it's almost a brand new state management library.

Under the hood, the core concepts of Actions, Reducers, Effects, Entities, and Selectors remain the same, but we have now a brand new API for managing these concepts in a much less verbose way. Also, we have the inclusion of NgRx Data, which is a new and very powerful way of managing Entity Data.

Actually, NgRx Data is a powerful abstraction layer on top of NgRx, that allows us to add state management to large parts of our application without having to write much code at all.

Course Overview

In this course, we are going to take a small existing application that is built without any state management. We are going to understand what are the consequences of not doing state management by identifying some problems that the application has in its initial form.

Then we are going to start refactoring the application, and we are going to add state management to the application multiple screens step-by-step. We are going to start with the Authentication features of the application, and then we are going to move on to the entity data management part.

We are going to explain at length all the key concepts of NgRx: Actions, Reducers, Effects, and Selectors, and we are going to explain in detail the Store architecture itself and understand its benefits.

Throughout the course we are going to introduce step-by-step and explain in detail the NgRx Store module, NgRx Effects, we are going to cover in detail NgRx Entity and the Entity format, we are going to install and do a guided tour of the NgRx Dev Tools, the NgRx Router Store, and the time-travelling debugger.

We are also going to learn how to make the most out of NgRx Data, and learn how to customize it in order to manage entity data with minimal application code. We will cover NgRx while keeping in mind best practices like good Action hygiene.

Table of Contents

This course covers the following topics:

Introduction to State Management
The Store Architecture In Detail
NgRx Key Concepts
Actions and Action Creators
Reducers
NgRx Effects
Selectors
Adding Authentication to an NgRx Application
NgRx Entity and the Entity Format
NgRx DevTools
NgRx Time Travelling Debugger
NgRx Runtime checks and Store Immutability
NgRx Router Store
NgRx Data and Entity State Management
NgRx Best Practices

What Will You Learn In this Course?

At the end of this course, you will feel comfortable with the notions of state management and the centralized store solution in general

You will feel comfortable designing new Applications using NgRx, using a simple methodology and you will know in-depth the complete Ngrx library ecosystem: including the Ngrx Store, Effects, Entity, and NgRx Data libraries

You will know how to quickly scaffold parts of the solution using Ngrx Schematics, and how to set up the Ngrx DevTools from scratch, including the router integration

What's inside

Learning objectives

Code in github repository with downloadable zip files per section
Become familiar with the centralized store pattern, and how to use it in angular
Know when to use a centralized store solution and why
Learn how to use ngrx data to handle entity data with minimal code
Learn in-depth ngrx store, understand in detail all core store patterns, including reducers and actions

Learn in detail ngrx effects, learn when to use a side-effect
Learn in detail ngrx entity, when to use and why, learn what are the benefits
Transform step-by-step an existing angular plain application, and turn it into a store based application
Learn to implement common functionality in ngrx, such as authentication or entity pagination
Learn ngrx in-depth in a fun and practical way, by implementing real use cases

Code in github repository with downloadable zip files per section
Become familiar with the centralized store pattern, and how to use it in angular
Know when to use a centralized store solution and why
Learn how to use ngrx data to handle entity data with minimal code
Learn in-depth ngrx store, understand in detail all core store patterns, including reducers and actions
Learn in detail ngrx effects, learn when to use a side-effect
Learn in detail ngrx entity, when to use and why, learn what are the benefits
Transform step-by-step an existing angular plain application, and turn it into a store based application
Learn to implement common functionality in ngrx, such as authentication or entity pagination
Learn ngrx in-depth in a fun and practical way, by implementing real use cases

Syllabus

Introduction

NgRx (with NgRx Data) - Helicopter View

IMPORTANT - Recommended Software Versions

NgRx The Complete Guide - Development Environment Setup

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Covers NgRx Data, Store, Effects, Router Store, NgRx Entity, and DevTools, which are essential for modern Angular application state management

Explores the Store architecture in detail, which is a core concept for building scalable and maintainable Angular applications

Teaches NgRx using a step-by-step approach, refactoring an existing application to incorporate state management, which mirrors real-world development scenarios

Focuses on Angular 19, so learners should be aware that the code examples may not be compatible with older versions of Angular

Requires familiarity with TypeScript, as indicated by the inclusion of a Typescript Jumpstart Ebook, which may pose a challenge for those new to the language

Includes a bonus lecture updated in February 2025, which suggests the course is actively maintained and kept up-to-date with the latest NgRx features

Reviews summary

Complete ngrx and ngrx data guide

According to learners, this course provides a comprehensive and up-to-date guide covering the entire NgRx ecosystem, including Store, Effects, Entity, and specifically highlighting NgRx Data as a key strength. Many students praised the instructor's ability to explain complex concepts clearly, making the material accessible. The course structure, moving from basic principles to more advanced topics like NgRx Data, is considered well-organized and logical. Learners appreciate the practical, hands-on approach with code examples and the transformation of an existing application. While the nature of NgRx itself presents a steep learning curve, the course is widely seen as an excellent resource for mastering it.

Logical progression through NgRx topics.

"The course is very well structured, starting simple and building up complexity gradually."

"Liked the order in which the topics were presented, it flowed nicely."

"The syllabus covers all necessary components in a logical sequence."

Course content is current with recent Angular/NgRx.

"Glad to see the course covers NgRx with Angular 19, keeping it relevant."

"The recent updates ensure the material aligns with the latest versions and best practices."

"Current content is crucial for a fast-moving library like NgRx, and this course delivers."

Uses a real application for step-by-step learning.

"Building up the application piece by piece with NgRx was a great way to learn."

"The practical examples and refactoring process really helped solidify my understanding."

"Hands-on coding exercises and demos are very beneficial for learning NgRx."

Detailed explanation of NgRx Data and its usage.

"The section on NgRx Data was particularly helpful and clarified how to manage entity data efficiently."

"Learning NgRx Data was a game changer, and the course explains it very effectively."

"I appreciated the in-depth look at using NgRx Data to reduce boilerplate."

Instructor explains complex ideas simply.

"The instructor is fantastic at breaking down difficult concepts into understandable pieces."

"Explanations were crystal clear, making NgRx finally click for me."

"I found the way the instructor explained the core principles and patterns to be exceptionally clear."

Covers all key parts of the NgRx ecosystem.

"This course covers everything from the basics of Actions, Reducers, and Effects all the way through NgRx Data and Entity."

"I feel I now have a solid understanding of the full NgRx suite after completing this guide."

"Excellent overview of the entire NgRx landscape needed for modern Angular development."

NgRx itself is inherently complex to learn.

"NgRx is definitely challenging, and while the course helps, expect a steep learning curve."

"The complexity of state management patterns with NgRx requires significant effort."

"Even with excellent explanations, mastering NgRx takes time and practice outside the course."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in NgRx (with NgRx Data) - The Complete Guide (Angular 19) with these activities:

Review RxJS Observables

Show steps

Reviewing RxJS Observables will help you better understand the asynchronous data streams that NgRx uses extensively.

Browse courses on Observables

Show steps

Read the official RxJS documentation on Observables.
Practice creating and subscribing to Observables.
Experiment with different RxJS operators.

Read 'Enterprise Angular Monorepo Patterns'

Show steps

Reading this book will provide a broader understanding of application architecture, which is essential for effective NgRx implementation.

View Alter Ego: A Novel on Amazon

Show steps

Read the book cover to cover.
Take notes on key concepts and patterns.
Relate the concepts to your current Angular projects.

Build a Simple CRUD Application with NgRx Data

Show steps

Building a CRUD application will solidify your understanding of NgRx Data and how it simplifies entity state management.

Show steps

Set up a new Angular project with NgRx and NgRx Data.
Define the entity and its corresponding data service.
Implement the CRUD operations using NgRx Data.
Create a UI to interact with the data.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Read 'Angular Development with NgRx'

Show steps

Reading this book will provide a solid foundation in NgRx and help you build more robust and maintainable Angular applications.

View Alter Ego: A Novel on Amazon

Show steps

Read the book cover to cover.
Work through the examples in the book.
Experiment with different NgRx patterns and techniques.

Write a Blog Post on NgRx Best Practices

Show steps

Writing a blog post will force you to synthesize your knowledge of NgRx best practices and communicate them effectively.

Show steps

Research NgRx best practices from various sources.
Outline the key points you want to cover.
Write the blog post with clear examples and explanations.
Edit and proofread your post before publishing.

Contribute to an Open Source NgRx Project

Show steps

Contributing to open source will expose you to real-world NgRx implementations and help you learn from experienced developers.

Show steps

Find an open-source Angular project that uses NgRx.
Identify an issue or feature you can contribute to.
Fork the repository and create a new branch.
Implement the changes and submit a pull request.

Help others on Stack Overflow

Show steps

Helping others will reinforce your understanding of NgRx and expose you to different problem-solving approaches.

Show steps

Search for NgRx-related questions on Stack Overflow.
Provide clear and concise answers to the questions.
Explain your reasoning and provide code examples.

Career center

Learners who complete NgRx (with NgRx Data) - The Complete Guide (Angular 19) will develop knowledge and skills that may be useful to these careers:

Angular Developer

An Angular Developer designs, develops, and maintains Angular-based web applications. This typically involves creating user interfaces, implementing application logic, and integrating with backend services. This course helps developers build a solid understanding of state management using NgRx, which is crucial for developing complex and maintainable Angular applications. Particularly, the course covers NgRx Data, which provides a powerful abstraction for managing entity data, reducing boilerplate code. This skill is highly valuable for any Angular Developer.

See salaries and explore the career path for Angular Developer

Frontend Architect

A Frontend Architect is responsible for designing the overall structure and architecture of frontend applications. This role ensures that the application is scalable, maintainable, and performs well. The course is particularly relevant because it covers state management in detail, one of the most critical aspects of frontend architecture. The course goes over the Ngrx Ecosystem, giving an extended tour. A Frontend Architect can use the knowledge of NgRx, NgRx Data, and related tools to make informed decisions about state management strategies and choose the right tools for the job.

See salaries and explore the career path for Frontend Architect

Web Application Developer

A Web Application Developer specializes in building applications that run on the web. This course helps in the development of sophisticated, stateful web applications using Angular and NgRx. Because the course addresses complex state management and the centralized store solution, this is critical for modern web application development. Web Application Developers can leverage this knowledge to build scalable and maintainable applications, understanding key concepts like Actions, Reducers, and Effects, and applying best practices for Action hygiene.

See salaries and explore the career path for Web Application Developer

Software Engineer

A Software Engineer is involved in the entire software development lifecycle, from requirements gathering to deployment and maintenance. This course provides the engineer with valuable skills in state management within Angular applications. Knowing NgRx and NgRx Data, as taught in this course, allows the engineer to write more efficient and maintainable code, especially when dealing with complex application states. The course's step-by-step approach to refactoring an existing application to use NgRx is particularly beneficial for real-world scenarios.

See salaries and explore the career path for Software Engineer

Application Developer

An Application Developer builds and maintains software applications, often with a focus on a specific platform or technology. This course can improve their ability to build robust Angular applications. The course will help the application developer to understand the benefits of state management and how to implement it using NgRx. The exploration of NgRx Data enables quicker, more efficient data management, while keeping in mind best practices.

See salaries and explore the career path for Application Developer

Full-Stack Developer

A Full Stack Developer works on both the frontend and backend of a web application. This course is relevant to the frontend portion. Mastering NgRx and NgRx Data, as taught in this course, allows the developer to build robust and maintainable user interfaces. This course will provide the developer with the skills to handle complex state management scenarios with ease and efficiency.

See salaries and explore the career path for Full-Stack Developer

UI Developer

A UI Developer is responsible for implementing the user interface of a web application, ensuring it is visually appealing and user-friendly. This course helps build a strong understanding of state management with tools like NgRx. Managing the UI state effectively becomes essential in user-rich, interactive applications. The course's coverage of NgRx Entity and NgRx Data is particularly relevant, as it helps manage and display large datasets efficiently, contributing to a smoother user experience.

See salaries and explore the career path for UI Developer

Technical Trainer

A Technical Trainer educates others on software development technologies and best practices. This course equips the trainer with in-depth knowledge of NgRx, enabling them to teach state management concepts in Angular effectively. The course's step-by-step approach and real-world examples make it easier for the trainer to explain complex topics and provide practical guidance.

See salaries and explore the career path for Technical Trainer

Technical Lead

A Technical Lead guides a team of developers, making key technical decisions and ensuring code quality. This course may be useful in providing a comprehensive understanding of NgRx. This will help the Technical Lead make informed decisions about state management strategies within their Angular projects. By understanding the intricacies of NgRx, NgRx Data, and related tools, the Technical Lead can guide the team toward building more maintainable and scalable applications.

See salaries and explore the career path for Technical Lead

Solutions Architect

A Solutions Architect designs and oversees the implementation of complex software systems. This course may be useful in providing insights into state management strategies within Angular applications. Understanding how NgRx and NgRx Data can be used to manage application state efficiently enables the architect to design more robust and scalable solutions. The course's focus on best practices and real-world use cases is valuable for making informed architectural decisions.

See salaries and explore the career path for Solutions Architect

Software Consultant

A Software Consultant advises clients on technology solutions and best practices. This course helps the consultant to provide expert guidance on Angular state management strategies. Understanding NgRx, NgRx Data, and related tools enables the consultant to recommend effective solutions for building scalable and maintainable Angular applications. The course's coverage of real-world use cases and best practices is especially valuable for providing practical advice.

See salaries and explore the career path for Software Consultant

Software Development Manager

A Software Development Manager oversees the development process, ensuring projects are delivered on time and within budget. This course may be useful in providing insights into the technical aspects of Angular development, specifically state management using NgRx. This will help to manage teams more effectively, understanding the challenges and complexities involved in building large-scale Angular applications. Knowing NgRx and NgRx Data provides a better understanding of architectural choices and tradeoffs.

See salaries and explore the career path for Software Development Manager

Quality Assurance Engineer

A Quality Assurance Engineer ensures the quality of software through testing and validation. This course may be useful in understanding the state management architecture of Angular applications built with NgRx. With this knowledge, a Quality Assurance Engineer can design more effective test cases to catch state-related bugs. The ability to use NgRx DevTools, as covered in the course, is particularly helpful for debugging and validating application state.

See salaries and explore the career path for Quality Assurance Engineer

DevOps Engineer

A DevOps Engineer is responsible for automating and streamlining the software development lifecycle. This course may be useful in providing a better understanding of the application architecture, especially state management. As applications become more complex, understanding the intricacies of state management helps to optimize deployment and monitoring strategies. The course's overview of NgRx best practices and runtime checks is relevant to ensuring application stability and reliability.

See salaries and explore the career path for DevOps Engineer

Enterprise Architect

An Enterprise Architect is responsible for aligning IT strategy with business goals. This course may be useful in providing a deeper understanding of frontend architecture, specifically state management in Angular. This enables the architect to make informed decisions about technology choices and ensure that applications are built in a scalable and maintainable way. The course's focus on NgRx best practices and real-world use cases is valuable for aligning technical decisions with business requirements.

See salaries and explore the career path for Enterprise Architect