RFC: Selectable entities behaviour by default

[DJREMiX6]

Which @ngrx/* package(s) are relevant/related to the feature request?

signals

Information

I have always wondered why in the NGRX Signal Store documentation there is an example on how to handle a selected entity using withEntities() implementing it by yourself when that feature would be widely used by devellopers.

So when using a signalStore with the feature withEntities I would like to already have the capability to select one without implementing that logic by myself, for example something like:

export const EntitiesStore = signalStore(
    withEntities<MyEntity>()
);

export class MyComponent implements OnInit, OnDestroy {
    private readonly entitiesStore = inject(EntitiesStore);
    private readonly activatedRoute = inject(ActivatedRoute);

    private readonly someIdFromRoute = this.activatedRoute.snapshot.params["id"];

    ngOnInit() {
        this.entitiesStore.selectEntity(this.someIdFromRoute);
    }

    ngOnDestroy() {
        this.entitiesStore.clearSelectedEntity();
    }

    doSomething() {
        this.entitiesStore.selectedEntity().someProp;
    }
}

Nothing more, nothing less but I think it would be very usefull to have it ready to use

Describe any alternatives/workarounds you're currently using

By now I created a storeFeature that wraps the withEntities feature and returns it with the addition of the selectedId field and selectedEntity computed properties and some helpers like selectEntity() and clearSelectedEntity().

My solution actually wraps the withEntities by whole so that you can use it with named collection of entities the same way you use it wit the withEntities feature.

I would be willing to submit a PR to fix this issue

• Yes
• No

[Chiorufarewerin]

I haven't used the @ngrx/signals store much, but so far, none of my entities have required a selected entity.

The entities were like reference books, where you just have key-value pairs. Or maybe something more complex, where you need to display them as a list, and when you want to edit one, you navigate to a different page with the id in the path.

I'm not saying it's not useful, but I’d rather see it as just another feature.
For example:

const store = signalStore(
  withEnitites<MyEntity>(),
  withSelectedEntity<MyEntity>(),
);

[DJREMiX6]

I haven't used the @ngrx/signals store much, but so far, none of my entities have required a selected entity.

The entities were like reference books, where you just have key-value pairs. Or maybe something more complex, where you need to display them as a list, and when you want to edit one, you navigate to a different page with the id in the path.

I'm not saying it's not useful, but I’d rather see it as just another feature. For example:

const store = signalStore(
withEnitites(),
withSelectedEntity(),
);

Personally I use a lot this kind of structure in my code, with signal @ngrx/signals and @ngrx/store, in both cases i have a list of entities and when wanting to show a specific entity or have it selected for some other reason I use the selected id as provided in the following @ngrx/entities documentation page: https://ngrx.io/guide/entity/interfaces.

I wanted to have that same feature embedded with the capability of the new withEntities feature to have named collections and named properties which inherits from the collection name. I could split it into a separate feature and it could be a good idea but i think that it could lead the developers to run into a problem with named collections where they can mispell the collections resulting into mispelled properties which will mismatch with the collection.

Thanks for your point of view, I'll think about it, if you can provide an example of the way you think it should be implemented I'll be happy to look into it.

For now I'll wait for more feedbacks.

[markostanimirovic]

This cannot become part of the core withEntities feature because it's not flexible enough to support all of the use cases. For example, selectedEntity could also be taken from the route param, someone may prefer a different name/selecting logic, etc.

export const TodosStore = signalStore(
  withEntities<Todo>(),
  withComputed(({ entityMap }, params = injectRouteParams()) => ({
    // selectedEntity is derived from entityMap and route param
    selectedEntity: computed(() => {
      const id = params()['id'];
      return id ? entityMap()[id] : null;
    }),
  })),
);

Additionally, the selected entity is not needed for all entity collections, so why would selected entity logic be unnecessarily included in those stores?

If you need this feature for your app, you can create a custom feature withSelectedEntity. You can find an example of the withSelectEntity implementation in the official NgRx documentation: https://ngrx.io/guide/signals/signal-store/custom-store-features#example-3-managing-selected-entity