Technical Seminar what I hosted when working at NNG Limited Company about NGXS

1. Angular State Management
with NGXS
1. Why we need NGXS ?
2. What’s NGXS ?
3. How to implement NGXS ?

2. 1. Why we need NGXS ?
Component A Component B
Component D
Component C
Component E
App
Component
data
B
data
A
St
ate
albu
ms
data
A

3. STO
RE
State
1. Why we need NGXS ?
State
State
State
State
State

4. 1. Why we need NGXS ?
With NGXS
Without NGXS

5. 1. Why we need NGXS ?
NGXS Logger NGXS Devtools

6. 2. What’s NGXS ?
● Is a state management pattern + library for Angular.
● Acts as single source of truth for your application's state.
● Follows the CQRS pattern.

7. 2. What’s NGXS ?
There are 4 core concepts:
● Store: Global state container, action dispatcher and selector
● Actions: Class describing the action to take and its associated metadata
● State: Class definition of the state
● Selects: State slice selectors
STORE
ACTION SELECT
STA
TE

8. 2. What’s NGXS ?

9. 3. How to implement NGXS ?