Searching Data From Different Component in Angular NGXS

Question

I'm trying to figure out how will i able to search in NGXS from different component. I have my searchbar from the navbar component while i'm displaying my data from app component which is a different component. Please see this stackblitz link CLICK HERE

CODE

this.peopleForm.get('name').valueChanges.pipe(debounceTime(500)).subscribe(
  (name: string) => {
    console.log(name);
    this.people$ = this.store.select(AppState.nameFilter(name));
  }
)

Answer 1

Having a look at your StackBlitz, it seems you are trying to filter a list based on what is entered in the peopleForm input element.

Rather than tryring to select from the store when this value changes in the component, I've found a good way to model this problem is to store the 'search text' in the state, and use a @Selector that applies the current search value to the list returns those items that meet the criteria.

Take a look at this answer where I've outlined this approach.