ngrx

In a component, we use a ngrx selector to retrieve different parts of the state. public isListLoading$ = this.store.select(fromStore.getLoading); public users$ = this.store.select(fromStore.getUsers); the fromStore.method is created using ngrx createSelector method. For example: export const getState = createFeatureSelector<UsersState>('users'); export const getLoading = createSelector( getState, (state: UsersState) => state.loading ); I use these observables in the template: <div class="loader" *ngIf="isLoading$ | async"></div> <ul class="userList"> <li class="userItem" *ngFor="let user of

I have infinite loop with this code: Template: <ng-container *ngFor="let row of service.dataLoadAsync() | async"> Service: dataLoadAsync(filters: FinishedCallsFilter = {}): Observable<FinishedCall[]> { return this.httpFinishedCallsObservable(Object.assign({limit: this.limit}, {})).flatMap(response => { this.store.dispatch(new ReplaceMany(response.items)) return this.store }) } Also I tried this function realization: dataLoadAsync(filters: FinishedCallsFilter = {}): Observable<FinishedCall[]> { this.httpFinishedCallsObservable(Object.assign({limit: this.limit}, {})) .subscribe(response => this

There is a simple (Angular 4) route guard, which waits for some data to be loaded from backend: @Injectable() export class ContractsLoadedGuard implements CanActivate { constructor(private store: Store<State>) { } waitForData(): Observable<boolean> { return this.store.select(state => state.contracts) .map(contractList => !!contractList) .filter(loaded => loaded) .take(1); } canActivate(): Observable<boolean> { return this.waitForData(); } } Routing: const routes: Routes = [ { path: 'app-list', canActivate: [ContractsLoadedGuard], component: AppListComponent }, ]; And finally there is an @ngrx

I am working on a new angular 4 plus @ngrx 4 project. I wish to have a searching function on the loaded data. For example, all the contacts info have been loaded in the component. The contacts list will be filtered which contact name matched with the search text. Please see screenshot As the data is existed in store and I do not wish to call web api service again. Any idea or demo code would be appreciated. You can follow this flow to search what you need on already fetched content: Use something like '(input)'='searchInputChange$.next(search)' in your input. So, each time the user changes the

Background One of the reducers in my store deals with things that are selected within the app. The interface for this store (let's called it app ) could look like this: interface IApp { selectedProject: IProject; selectedPart: IPart; } So I want to have a subscription that performs an action only when a different 'project' is selected. I wrote something like this: this.store.select('app') .map((store: IApp) => store.selectedProject) .subscribe((project: IProject) => { // Stuff happens here }); This function does it stuff when selectedProject changes. However, it also does it stuff when

I'm searching for a solution to make my selector only emit a new value when the it has changed compared to the last emitted value, and not only the reference to the store is changed. I have the following state in my store: { items: [], loading: false, selectedItemId: 1 } And I have the following selector: export const getSelectedItem = createSelector(getItemsState, (state) => { return state.selectedItemId === null ? null : state.items.find(item => item.id === state.selectedItemId) } ); When I do a subscribe on this selector this fires each time when for example the loading flag in the store