How to make a computed Signal react to both an @Input Signal and an NGXS lazy selector?

Question

I'm working with Angular signals and NGXS state management, and I'm trying to create a computed signal that updates both when my input signal changes and when the store updates.

I have a lazy selector:

static searchById = (id: number) => createSelector(
  [ActiveDashboardSelectors.getSlices.searches], 
  searches => searches.find(search => search.id === id)
);

In my component, I have an input signal for the searchId:

searchId = input.required<number>();

I want to create a computed signal that reacts both to searchId changes and to store updates. I initially tried this:

public search = computed(() => select(ActiveDashboardSelectors.searchById(this.searchId())));

However, this results in a nested Signal (Signal<Signal<Search>>). What is the best way to write a computed signal that reacts to both my searchId input signal and state updates from NGXS?

Naren Murali · Accepted Answer · 2025-02-13 12:25:02Z

1

If it is a signal of a signal, execute the signal inside to get the actual value, so that it is an ordinary signal.

Since there are two signals inside, both will get evaluated when any of them change.

Replaced select with this._store.select to prevent injection errors.

public search = computed(() => 
  this._store.select(
    ActiveDashboardSelectors.searchById(this.searchId())
  )()
);

edited Feb 13 at 12:25

answered Feb 13 at 11:43

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

garethdn Feb 13 at 12:22

Thanks for this. The only thing I had to change was to use this._store.select instead of the standalone select function which results in injector errors. ¯_(ツ)_/¯

Collectives™ on Stack Overflow

How to make a computed Signal react to both an @Input Signal and an NGXS lazy selector?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest