Easier Angular Component State Management

Managing the state of Angular components can become complex as your component grows.

Note: As of the ngrx version 10 release, it is now recommended to use @ngrx/component-store for easier Angular component state management. However, the concepts outlined in this article still apply.

A simple approach to handle your component’s state is with component member variables and Angular’s default change detection. However, this approach is flawed for two reasons:

  1. Difficulty Scaling: Your component quickly becomes cluttered with member variables and messy templates.
  2. Performance Issues: You lack control over Angular’s change detection, ultimately hurting your application’s performance. This is because default change detection will run multiple times whenever a change is detected within the component: e.g. user events, timers, XHR, promises, etc. As an application grows, minimizing change detection code is crucial for a fast application that your users love.

To read more on this blog visit:  Easier Angular Component State Management

Author: Jeremy Zacharia