Member-only story
Angular: State Management With NGXS
Understand the fundamentals of NGXS and build a sample CRUD application
NGXS is essentially a state management library for Angular. You might have come across other state management solutions for Angular, such as NgRx and Akita. The following are two articles that I have written before about using NgRx for state management:
In this piece, I intend to cover the below topics.
- What is NGXS?
- Fundamental concepts of NGXS
- Building a sample CRUD application
What is NGXS?
As already stated above, NGXS is a state management solution specifically developed for Angular. Before we go further into details, let’s try to understand the concept of state in an Angular application.
State
Theoretically, the application state is the entire memory of the application. In simple terms, the application state is composed of data received by API calls, user inputs, presentation UI state, application preferences, etc. A simple, concrete example of an application state would be a list of customers maintained in a CRM application.
Let’s try to understand the application state in the context of an Angular application. As you are well aware, an Angular application is typically made up of many components. Each of these components has its own state and has no awareness of the state of the other components. In order to share information between parent-child components, we use @Input and@Output decorators. However, this approach is practical only if your application consists of a few components, as shown below.
When the number of components grows, it becomes a nightmare to pass the information between components solely via @Input and @Output decorators. Let’s take the following figure to elaborate on this.
