The PersistNgFormPlugin helps to keep your form synced with your store. One common scenario is preventing your user from losing data he filled in a form, after navigating away without saving it. Another scenario is when you want to persist a form’s state across pages.

Let’s build a small application that demonstrates it. We’ll create a page like eBay, where you have a list of products on one side and filters you can apply on the other side.

Here’s an illustration of the final result:

Live Demo

We knows that we need to maintain a collection of products so we’ll create an EntityStore .

In addition to the products entities, the store root holds a state which contains the current active filters.

Akita recommends separating the Domain State from the UI State. Domain State is the state of your application in the server side, while the UI state is more along the lines of the current time based on the user’s machine, which tab is active tab, or whether a drop-down is open.

When you have a global UI state for a specific store, you can put the state under a ui key.

At this point, our store state looks like the following: