Searching Data From Different Component in Angular NGXS

Asked
Active3 hr before
Viewed126 times

3 Answers

angulardifferentcomponent
90%

You can select slices of data from the store using the @Select decorator, It has a few different ways to get your data out, whether passing the state class, a function, a different state class or a memoized selector

Example_snippet/controller/utility/_angular.js/ import { Select } from '@ngxs/. . .
import { Select } from '@ngxs/store';import { ZooState, ZooStateModel } from './zoo.state';​@Component({ ... })export class ZooComponent {  // Reads the name of the state from the state class  @Select(ZooState) animals$: Observable<string[]>;​  // Uses the pandas memoized selector to only return pandas  @Select(ZooState.pandas) pandas$: Observable<string[]>;​  // Also accepts a function like our select method  @Select(state => state.zoo.animals) animals$: Observable<string[]>;​  // Reads the name of the state from the parameter  @Select() zoo$: Observable<ZooStateModel>;}
load more v
88%

We'll use the read component to read from ngxs store and our create component to add data to the store,,Ngxs is a different approach to Angular state management that offers a few benefits, namely less boilerplate code

Example_snippet/controller/utility/_angular.js/ > ng new ngxs-intro > cd ngxs-. . .
> ng new ngxs - intro >
   cd ngxs - intro
Step 2 continued with > yarn add @ngxs/store. . .
> yarn add @ngxs / store
Step 3 continued with > yarn add @ngxs/logger-plugin. . .
> yarn add @ngxs / logger - plugin @ngxs / devtools - plugin--dev
Step 4 continued with > ng g c read > ng g c create. . .
> ng g c read
   >
   ng g c create
Step 5 continued with export interface Tutorial { . . .
export interface Tutorial {
   name: string;
   url: string;
}
Step 6 continued with import { Tutorial } from './... . .
import {
   Tutorial
} from './../models/tutorial.model'

export class AddTutorial {
   static readonly type = '[TUTORIAL] Add'

   constructor(public payload: Tutorial) {}
}

export class RemoveTutorial {
   static readonly type = '[TUTORIAL] Remove'

   constructor(public payload: string) {}
}
Step 7 continued with // Section 1 import { State, A. . .
// Section 1
import { State, Action, StateContext, Selector } from '@ngxs/store';
import { Tutorial } from './../models/tutorial.model'
import { AddTutorial, RemoveTutorial } from './../actions/tutorial.actions'

// Section 2
export class TutorialStateModel {
    tutorials: Tutorial[];
}

// Section 3
@State<TutorialStateModel>({
    name: 'tutorials',
    defaults: {
        tutorials: []
    }
})
Step 8 continued with // Sections 1, 2 and 3 above r. . .
// Sections 1, 2 and 3 above removed for brevity

export class TutorialState {

    // Section 4
    @Selector()
    static getTutorials(state: TutorialStateModel) {
        return state.tutorials
    }

    // Section 5
    @Action(AddTutorial)
    add({getState, patchState }: StateContext<TutorialStateModel>, { payload }:AddTutorial) {
        const state = getState();
        patchState({
            tutorials: [...state.tutorials, payload]
        })
    }

    @Action(RemoveTutorial)
    remove({getState, patchState }: StateContext<TutorialStateModel>, { payload }:RemoveTutorial) {
        patchState({
            tutorials: getState().tutorials.filter(a => a.name != payload)
        })
    }

}
load more v
72%

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,, It won't matter what combination of components you have - in your case the navbar component would dispatch the action to the state

Example_snippet/controller/utility/_angular.js/ peopleForm. . .
peopleForm
load more v