Active Entity

The store supports having an active property, holding the active entity's id. This can prove to be very useful in cases where you want to interact with the entity that is currently active.

Here's how to set it up:

todos.store.ts

import { EntityState, ActiveState, StoreConfig, EntityStore } from '@datorama/akita';

export interface TodosState extends EntityState<Todo, number>, ActiveState {}

@StoreConfig({ name: 'todos' })
export class TodosStore extends EntityStore<TodosState> {
  constructor() {
    super();
  }
}

tip

You can use the store or feature schematics with the flag --withActive="Active" to generate a store which ActiveState.

The Store provides the following methods to update and query the active state:

API

setActive

Set the given entity id as active:

store.setActive(entityId);
store.setActive(null);

updateActive

Update the active entity:

store.updateActive({ name: newName });

store.updateActive((active) => {
  return {
    config: {
      ...active.config,
      date,
    },
  };
});

It’s possible to set the next or previous entity as active. For example:

store.setActive({ prev: true });
store.setActive({ next: true });

By default, if the active entity is the last one and you select to activate the next entity, it will loop to the beginning and make the first one active. If you want to disable this behavior set the wrap parameter to false:

store.setActive({ next: true, wrap: false });

selectActiveId

Select the active entity's id:

activeId$ = query.selectActiveId();

selectActive

Select the active entity: (don't forget to use the ActiveState interface in your store's state)

activeEntity$ = query.selectActive();
activeTitle$ = query.selectActive(({ title }) => title);

getActiveId

Get the active entity id:

const activeId = query.getActiveId();

getActive

Get the active entity:

const active = query.getActive();

hasActive

Whether an active entity is set:

if (this.query.hasActive()) {
}
if (this.query.hasActive(id)) {
}

Multiple Active Entities

In addition to having one active entity, there are times when we need to manage multiple active entities. Here is how to do it with Akita:

todos.store.ts

import { EntityState, MultiActiveState, StoreConfig } from '@datorama/akita';

export interface TodosState extends EntityState<Todo, number>, MultiActiveState {}

const initialState = {
  active: [],
};

@StoreConfig({ name: 'todos' })
export class TodosStore extends EntityStore<TodosState> {
  constructor() {
    super(initialState);
  }
}

Unlike working with a single active entity, we've added the MultiActiveState interface and set the initial state of the active property to an empty array.

tip

You can use the store or feature schematics with the flag --withActive="MultiActive" to generate a store which ActiveState.

In addition to the methods of working with a single active entity, we will also receive the following methods:

setActive

store.setActive([id, id, id]);

addActive

store.addActive(id);

removeActive

store.removeActive(id);

toggleActive

store.toggleActive(id);