OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.

NgRx Signal store 19 for Angular - The missing guide

Kobi Hari

NgRx Signal Store - The Missing Guide

Uncover why NgRx Signal Store is seen as the essential missing piece for fully harnessing Angular signals, offering a lightweight yet powerful state management solution.

This course provides a comprehensive dive into NgRx Signal Store, a more streamlined and straightforward alternative to other NgRx stores. It's designed to be both easy to use and highly flexible, making it an excellent choice for state management in Angular applications. With support for custom features, it's not only simple but also scalable and extendable.

What you'll learn:

Read more

NgRx Signal Store - The Missing Guide

Uncover why NgRx Signal Store is seen as the essential missing piece for fully harnessing Angular signals, offering a lightweight yet powerful state management solution.

This course provides a comprehensive dive into NgRx Signal Store, a more streamlined and straightforward alternative to other NgRx stores. It's designed to be both easy to use and highly flexible, making it an excellent choice for state management in Angular applications. With support for custom features, it's not only simple but also scalable and extendable.

What you'll learn:

  • Why NgRx Signal Store stands out: Learn why signals, combined with the redux pattern, provide a lighter and better state management solution compared to traditional stores in NgRx. Discover how it simplifies development while remaining powerful and scalable.

  • Core features: Master the core functionality, including withState, withComputed, withMethods, and withHooks, and the new withProps, while learning the best practices for dependency injection and state updates.

  • Advanced topics: In version 18, NgRx Signals introduces significant improvements like state encapsulation, private store members, which allows you to better control and isolate the state within your stores.

  • New features: In version 19, withProps and signalMethod were introduced, learn how to use them and when.

  • Custom features: Missing the redux devtools extension? NgRx signal store allows the development of reusable custom features, such as an adapter for the devtools. Learn how to use libraries of custom features as well as writing your own.

Why this course?

  • Build a real-life application as part of your learning journey... in fact, build two. One simple, one more challanging.

  • Strengthen your skills with small, focused exercises.

  • Gain insights into the best practices for working with signals, avoiding common mistakes, and maximizing the store’s potential.

By the end, you’ll be ready to use NgRx Signal Store to manage state efficiently and confidently in your Angular apps.

Enroll now

What's inside

Syllabus

Introduction
What you need to know
Practicing what you learn
Recap - Functional programming in Typescript
Read more
Section introduction - Functional Programming
The Angular "Renaissance"
Functional Programming, why?
What are Functions, Method, Delegates
Javascript is not REALLY Object Oriented
Functional Programming in Typescript
Lambda Expressions in Typescript
Function Types in Typescript
Closures in Javascript
Functions as Containers
What are Pure Functions?
Immutable Objects and Operators
Dynamic Class Creation
Summary
Learn the basics of ngrx signals. What is signal state, how to use a signal store and the various parts of it
Intruduction to ngrx and the store
Installing the ngrx/signals package
Resolving version conflicts
The signalState utility
Ngrx Signals - Redux lite
Introducing our example project
Defining the store state and initial value
Creating Signals Store type
Consuming signal stores in components
Try it yourself: Create a signal store
Adding Computed signals
Composing Computed Signals
Try it yourself: Add computed signals to the signal store
The patchState function
Adding Methods to signal store
Using State Updaters
Try it yourself: Add methods to signal store
Adding hooks to the signal store
Try it yourself: Add hooks to the signal store
In this section we will see how to put all of the knowedge you aquired so far together into a real life project
Section introduction
Introduction to our project
Defining The core state and the store
Defining the derived view models
Builder for the product list view model
Builder for the cart view model
Binding the views to the view models
Defining the store updaters and methods
Binding the UI to the methods
Persisting the cart using hooks
Learn the new features of ngrx 18. Learn how to derive computed signals from other signal stores. Learn how to inject services into methods. Learn how to create private members
Section Introduction
What are store features and feature creators?
What are feature creator parameters?
More signal store functions
Providing the stores in components and routes
Using Closures to keep private non-signal data
Try it yourself: Using closures in feature parameters
Injecting into withComputed
Deriving computed signals from another store
Try it yourself: Injecting into computed signals
Injecting into function parameters
New in NgRx 18 - Private signal store members
New in NgRx 19 - withProps
Try it yourself: Private and non-signal data
Shop project - Distributed Stores
Section Intro
Exercise goal and starting project
"Point of truth" for each data
Refactoring the view models
Refactoring the View model builders
Refactoring the stores computed view models
Conecting the components to the local stores
Refactoring the missing methods
Asyncronous Programming in Signal Store
Setting the store to work with asynchronous APIs
Using async Methods
Try it yourself: async methods
The Pros and Cons of async methods
Interoperability with rxjs using rxMethod
Side effects in rxMethod using the "tap" operator
Try it yourself: side effects using rxMethods
Calling asnyc API from rxMethod
Overview of flattening operators
Code Along with me: invoking async APIs in rxMethods
Recovering from errors
Try it yourself: Error handling in rxMethods
Automating the rxMethod invocation
New in NgRx19 - Signal Method
Try it yourself: Signal Methods
Section Summary
Learn about how to create custom features and some best practices on when and how to use them
Overview - What are custom features
Open source fatures - withDevtools
The withEntities custom feature
Setting entities configuration

Save this course

Save NgRx Signal store 19 for Angular - The missing guide to your list so you can find it easily later:
Save

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 Signal store 19 for Angular - The missing guide with these activities:
Review Functional Programming Concepts
Solidify your understanding of functional programming principles in TypeScript, which are foundational to understanding NgRx Signal Store's design and usage.
Browse courses on Functional Programming
Show steps
  • Review key concepts like pure functions, immutability, and higher-order functions.
  • Practice writing small, functional TypeScript snippets.
  • Familiarize yourself with lambda expressions and closures.
Read 'Effective TypeScript'
Improve your TypeScript skills to better understand and utilize NgRx Signal Store effectively.
View Effective Typescript on Amazon
Show steps
  • Read the book, focusing on sections related to type safety and functional programming.
  • Try implementing the examples in the book using TypeScript.
Implement Simple Signal Stores
Reinforce your understanding of NgRx Signal Store by creating small, focused signal stores for different application features.
Show steps
  • Create a basic signal store with state, computed signals, and methods.
  • Implement state updates using patchState and state updaters.
  • Experiment with composing computed signals.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Read 'NgRx - Enterprise Grade Scalable Angular Applications'
Expand your understanding of state management principles in Angular using NgRx.
View Putting Knowledge to Work on Amazon
Show steps
  • Read the book, focusing on sections related to state management and application architecture.
  • Compare and contrast the concepts presented in the book with NgRx Signal Store.
Blog Post: NgRx Signal Store vs. Traditional NgRx
Deepen your understanding by articulating the differences between NgRx Signal Store and traditional NgRx stores, highlighting the benefits and trade-offs of each approach.
Show steps
  • Research the key differences between NgRx Signal Store and traditional NgRx.
  • Outline the blog post, covering topics like performance, complexity, and ease of use.
  • Write the blog post, providing code examples and clear explanations.
  • Publish the blog post on a platform like Medium or your personal blog.
Contribute to NgRx Signal Store Libraries
Enhance your expertise by contributing to open-source libraries related to NgRx Signal Store, such as custom feature implementations or bug fixes.
Show steps
  • Explore existing NgRx Signal Store libraries on GitHub.
  • Identify potential areas for contribution, such as bug fixes or new features.
  • Submit a pull request with your changes, following the library's contribution guidelines.
Build a Complex Application with Distributed Stores
Solidify your knowledge of advanced NgRx Signal Store concepts by building a complex application that utilizes distributed stores and asynchronous operations.
Show steps
  • Design the application architecture, focusing on modularity and separation of concerns.
  • Implement distributed stores for different application features.
  • Integrate asynchronous APIs using rxMethod or signalMethod.
  • Implement error handling and loading states.

Career center

Learners who complete NgRx Signal store 19 for Angular - The missing guide will develop knowledge and skills that may be useful to these careers:
Angular Developer
An Angular Developer builds user interfaces and implements front-end logic for web applications. This course thoroughly examines NgRx Signal Store for Angular, providing a lighter and better state management solution compared to traditional stores in NgRx, and this knowledge directly translates to improved efficiency and maintainability in Angular projects. Aspiring Angular developers should consider this course to build a foundation in modern state management techniques. The section of the course on new features in version 19, withProps and signalMethod, is especially useful.
See salaries and explore the career path for Angular Developer
Front End Architect
A Front End Architect makes high-level design choices for user interfaces and ensures the scalability and maintainability of front-end systems. For a Front End Architect, understanding state management solutions like NgRx Signal Store is essential for architecting robust and efficient Angular applications. This course explores the core functionality, including withState, withComputed, withMethods, and withHooks, and the new withProps. Architects benefit from the course's exploration of custom features, enabling the development of reusable components and libraries of custom features.
See salaries and explore the career path for Front End Architect
Web Application Developer
A Web Application Developer is responsible for developing and maintaining web applications, often working with various front-end and back-end technologies. As NgRx Signal Store emphasizes a lightweight, flexible, and scalable approach to state management, this course is highly relevant. Web Application Developers gain practical experience by building real-life applications, strengthening their skills with focused exercises, and learning best practices for working with signals. The section on asynchronous programming in Signal Store may be particularly helpful.
See salaries and explore the career path for Web Application Developer
UI Engineer
A UI Engineer specializes in building user interfaces and ensuring a smooth and intuitive user experience, often working closely with designers and developers. UI Engineers can benefit from the course's focus on mastering core functionality, custom features, and advanced topics like state encapsulation and private store members. This course may assist UI Engineers in understanding the underlying architecture of Angular applications and how NgRx Signal Store fits into the overall design, by creating more efficient and maintainable user interfaces.
See salaries and explore the career path for UI Engineer
Software Engineer
A Software Engineer designs, develops, and maintains software applications, often working on various parts of the software development lifecycle from requirements gathering to testing and deployment. The material in this class helps Software Engineers to improve their understanding of state management in Angular applications, which can lead to more efficient and maintainable code. The course also emphasizes best practices for working with signals, which may help engineers avoid common mistakes and maximize the store’s potential.
See salaries and explore the career path for Software Engineer
Full-Stack Developer
A Full Stack Developer works on both the front-end and back-end components of web applications, requiring a broad understanding of various technologies and frameworks. This course is valuable for Full Stack Developers who use Angular on the front-end, as it provides a comprehensive understanding of state management using NgRx Signal Store. By the end of the course, a Full Stack Developer will be ready to use NgRx Signal Store to manage state efficiently and confidently in their Angular apps. The section on interoperability with RxJS using rxMethod is also valuable.
See salaries and explore the career path for Full-Stack Developer
Application Architect
An Application Architect designs the structure and behavior of software applications, ensuring they meet the requirements of the business and are scalable, maintainable, and secure. Application Architects should take this course to improve in their understanding of how NgRx Signal Store can be used to create modular and maintainable Angular applications. The course covers advanced topics like state encapsulation, private store members, and custom features, which are essential knowledge for designing robust and scalable applications.
See salaries and explore the career path for Application Architect
Technical Lead
A Technical Lead, takes part in guiding a team of developers, ensuring code quality, and making technical decisions for projects. As they often oversee the implementation of complex features and systems, this course may provide insight into modern state management, enabling them to make informed decisions about technology choices and development practices. Additionally, the course's material on integrating RxJS with NgRx Signal Store ensures that the team can handle asynchronous operations efficiently and effectively.
See salaries and explore the career path for Technical Lead
Solutions Architect
A Solutions Architect is responsible for designing and implementing technology solutions that meet the needs of an organization. They must have a comprehensive understanding of various technologies and how they can be integrated to create effective solutions. A Solutions Architect should consider working with NgRx Signal Store in Angular applications, and this course may provide the knowledge to ensure that the solutions are scalable, maintainable, and aligned with industry best practices, particularly in the area of state management.
See salaries and explore the career path for Solutions Architect
Web Developer
A Web Developer builds and maintains websites and web applications, typically working with HTML, CSS, JavaScript, and various front-end frameworks. This course is quite relevant for Web Developers who use Angular, as it provides a solid understanding of state management using NgRx Signal Store. By the end of the course, a Web Developer will be better prepared to manage state efficiently in Angular apps. The section on installing the ngrx/signals package is especially useful.
See salaries and explore the career path for Web Developer
Software Developer
A Software Developer, like a Software Engineer, designs, develops, and maintains software applications, often working on various parts of the software development lifecycle. This course may help Software Developers in their comprehension of state management, leading to more efficient and maintainable code. The course also emphasizes best practices for working with signals, which may help developers avoid common mistakes. It highlights the benefits of functional programming in TypeScript.
See salaries and explore the career path for Software Developer
Application Developer
An Application Developer specializes in creating and maintaining software applications for various platforms, requiring a strong understanding of programming languages and development frameworks. This course may be valuable for Application Developers who use Angular on the front-end, as it provides an introduction to state management using NgRx Signal Store. By the end of the course, an Application Developer may be able to manage state more effectively in their Angular apps with a better understanding of dependency injection and state updates.
See salaries and explore the career path for Application Developer
Mobile App Developer
A Mobile App Developer creates applications for mobile devices, often working with platforms like iOS and Android and using languages like Swift, Java, or frameworks like React Native and Ionic. While this course focuses on Angular, which is primarily used for web applications, the foundational concepts of state management may be helpful for Mobile App Developers using frameworks like Ionic that integrate with Angular. The course's insights into handling asynchronous operations using RxJS may also be valuable for managing data flow in mobile apps.
See salaries and explore the career path for Mobile App Developer
Database Administrator
A Database Administrator (DBA) is responsible for managing and maintaining databases, ensuring their performance, security, and availability. While this course primarily focuses on front-end development with Angular and NgRx Signal Store, the concepts of state management and data handling could indirectly benefit a Database Administrator. Understanding how applications interact with data at the front-end may provide insights into optimizing database performance and data structures. For instance, the course's discussions on asynchronous programming and data flow may offer a broader perspective on application-database interactions.
See salaries and explore the career path for Database Administrator
Network Engineer
A Network Engineer designs, implements, and manages computer networks, ensuring their stability, security, and performance. This course, focused on Angular and NgRx Signal Store, has very little direct relevance to the responsibilities of a Network Engineer. Network engineering primarily involves hardware and infrastructure, whereas this course focuses on front-end software development. The concepts of software architecture and state management are generally outside the scope of network engineering, making the skills learned in this course not directly applicable.
See salaries and explore the career path for Network Engineer

Reading list

We've selected two books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in NgRx Signal store 19 for Angular - The missing guide.
Cover image
Effective Typescript
Save
Provides a deep dive into TypeScript best practices, which are essential for writing robust and maintainable Angular applications using NgRx Signal Store. It covers topics like type safety, design patterns, and advanced TypeScript features. While not directly about NgRx, it provides the necessary TypeScript foundation. This book is more valuable as additional reading to deepen your TypeScript knowledge.
Effective Typescript
Paperback
Check
Effective Typescript
Kindle Edition
Check
Cover image
Putting Knowledge to Work
Save
Provides a comprehensive guide to building scalable Angular applications using NgRx. While it focuses on the traditional NgRx store, many of the concepts related to state management, actions, and reducers are applicable to NgRx Signal Store. This book is more valuable as additional reading to deepen your understanding of state management principles. It is commonly used as a reference tool by industry professionals.
Putting Knowledge to Work
Paperback
Check
Putting Knowledge to Work
Kindle Edition
Check

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Similar courses are unavailable at this time. Please try again later.
Effort
11.5 total hours
Via
Udemy
Instructor
Kobi Hari
Language
English
Share and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2025 OpenCourser