Nerds Pledge Magnanimously

    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published


    SLVI Data Management

    Many applications have substantial domain models with 10s or 100s of entity types.

    Such applications typically create, retrieve, update, and delete entity data that are "persisted" in a database of some sort, hosted on a remote server.

    Developers who build these apps with the NgRx Store, Effects, and Entity libraries alone tend to write a large number of actions, action-creators, reducers, effects, dispatchers, and selectors as well as the HTTP GET, PUT, POST, and DELETE methods for each entity type. There will be a lot of repetitive code to create, maintain, and test. The more entities in your model, the bigger the challenge.

    With SLVI/Data you can develop large entity models quickly with very little code and without knowing much NgRx at all. Yet all of NgRx remains accessible to you, when and if you want it.

    SLVI/Data is an abstraction over the Store, Effects, and Entity that radically reduces the amount of code you'll write. As with any abstraction, while you gain simplicity, you lose the explicitness of direct interaction with the supporting NgRx libraries.

    This library was made with Love, generated with Nx.

    Default Level (Component Level)

    1. Inject DataSandBoxFactory in your component constructor().
    2. Ask your factory to create your sandBox immediately then follow this code example.
    • once you finished, you already got your sandBox and you can call any function as much as you need.

      import { DataSandBoxFactory, DataSandBoxService } from '@slvi/data';
      export class Component {
          sandBox: DataSandBoxService; // Define sandBox Variable in Component
              private factory: DataSandBoxFactory, // Factory Injection
          ) {}
          ngOnInit(): void {
              // Or Here
              this.sandBox = this.factory.create('ENTITY_ID', 'ENDPOINT_ID');

    Advanced Level (SandBox Level - For More control)

    1. Create your own @Injectable() CustomSandBox extends DataSandBoxService to inherit everything.
    2. Inject your CustomSandBox in your component constructor().
    • Start using it normally same as default or implement your custom methods.

      import { DataSandBoxService } from '@slvi/data';
      export class CustomSandBox extends DataSandBoxService {
          constructor() {
              super('ENTITY_ID', 'ENDPOINT_ID');
      export class Component {
          private sandBox: CustomSandBox,
          ) {}


    One-Entity / single-Item

    1. For manipulating operations for (one-entity) use:

      // Body is Optional
      this.sandBox.update(ITEM_ID, BODY);
      // For forcing calling API ignoring cache.
    • Subscribe item$ property in sandBox to get current item in store or simply use item$ | async in your HTML.

      this.sandBox.item$.subscribe((item) {
          // Implement your own code

    List-of-Entities / Many-of-Items

    1. For manipulating operations for (bulk/list-entities) use:

      // Body is Optional
      this.sandBox.bulkUpdate(ITEMS_IDS, BODY);
      this.sandBox.bulkDelete(ITEMS_IDS, BODY);
      // Special Case :: For Infinity scroll or follow pagination to fetch all data with max response limit
      // For forcing calling API ignoring cache
    2. You can Subscribe items$ property in sandBox to get current items in store.

      this.sandBox.items$.subscribe((items) {
          // Implement your own code

    For full Documentation in GitHub.


    npm i @slvi/data

    DownloadsWeekly Downloads






    Unpacked Size

    738 kB

    Total Files


    Last publish


    • amr.samra