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

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

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?

Solution

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())
  )()
);