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

@programoholic. What if navbar is on a different module? Output works only on parent child — Joseph, Sep 26 '19 at 14:39
Keep an eye on unsubscribing. For me it seems you're creating a lot of subscriptions to the store without unsubscribing. — hgoebl, Sep 27 '19 at 07:03

score 1 · Accepted Answer · answered Sep 27 '19 at 05:19

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.

answered Sep 27 '19 at 05:19

Garth Mason

7,611
3
30
39

Hi. Thanks for your reply. Your answer i believe works if you are on the same component right? Mine if the search is on a different component from where the output is displayed. Can your forked my stackblitz? Thanks – Joseph Sep 27 '19 at 05:49
It won't matter what combination of components you have - in your case the navbar component would dispatch the action to the state. Then app component will see the filtered list be virtue of subscribing to Selector – Garth Mason Sep 27 '19 at 05:54
Can you forked my stackblitz if its ok with you? Thank you – Joseph Sep 27 '19 at 05:56
Take a look at this https://stackblitz.com/edit/ngxs-searching-different-component-erexd2 – Garth Mason Sep 27 '19 at 06:12

Searching Data From Different Component in Angular NGXS

1 Answers1