Connect store variables to components using Angular's ngrx

Question

Connect store variables to components using Angular's ngrx

I am attempting to link the location variable in my component to another variable in the store using a selector with ngrx v13 in Angular. However, when I include the variable with the property in the HTML, I encounter an error:

Error message: Property 'name' does not exist on type 'Observable'

Here is my code:

app.selector.ts

import { createSelector } from "@ngrx/store";

export const CurrentLocationSelector = (state: AppState) => state.currentLocation;
export const getCurrentLocation = createSelector(
    CurrentLocationSelector,
    (currentLocation: any) => {
      return [...new Set(currentLocation)];
    }
);

This is my AppState:

interface AppState{
    darktheme: boolean;
    temperatureUnit: string;
    currentLocation: any; // object representing the current location
    locationAutoComplete: any[]; // array containing autocomplete results
    locationCurrentWeather: CurrentItem | null;
    Forecast5Days: ForecastItem[];
    Favorites: FavoriteItem[];
    loading: boolean;
    getData: boolean;
}

In my component, I have written: current-weather.component.html

         <div class="left">
             <span class="locationName">{{location$.name}}</span>
             <span class="date">{{currentFullDate}}</span>
             <div class="weatherDescription">
                 <img [src]="imageCurrentWeather" class="weatherIcon">
                 <div class="weatherText">{{CurrentWeather.WeatherText}}</div>
             </div>
             <h1 [innerHTML]="CurrentWeather.Temperature + ' ' + currentUnit"></h1>
         </div>

In my current-weather.component.ts, I have the following code:

  location$ = this.store.pipe(select(CurrentLocationSelector))

angular ngrx ngrx-store angular-ngrx-data angular13

Answer 1

Answer №1

The issue at hand is that you have designated your variable location$ as an observable. This implies that it doesn't represent a single object carrying your data, but rather a stream of multiple values that could potentially hold your data at different points in time.

Therefore, to access the value of your object at a specific moment - typically the current moment - you must use .subscribe() to listen for incoming observables, and .select to tune into your desired selector containing the data you require, like so:

Within your current-weather.component.ts file:

let $location;
this.store.select(CurrentLocationSelector).subscribe(location => {
  $location = location; // set a debug break point here to observe the updated value
});

Answer 2

The issue at hand is that you have designated your variable location$ as an observable. This implies that it doesn't represent a single object carrying your data, but rather a stream of multiple values that could potentially hold your data at different points in time.

Therefore, to access the value of your object at a specific moment - typically the current moment - you must use .subscribe() to listen for incoming observables, and .select to tune into your desired selector containing the data you require, like so:

Within your current-weather.component.ts file:

let $location;
this.store.select(CurrentLocationSelector).subscribe(location => {
  $location = location; // set a debug break point here to observe the updated value
});

Answer 3

Answer №2

Utilize the async pipe with the observable location$.

<span class="locationName">{{(location$ | async).name}}</span>

current-weather.component.html

     <div class="left">
         <span class="locationName">{{(location$ | async).name}}/span>
         <span class="date">{{currentFullDate}}</span>
         <div class="weatherDescription">
             <img [src]="imageCurrentWeather" class="weatherIcon">
             <div class="weatherText">{{CurrentWeather.WeatherText}}</div>
         </div>
         <h1 [innerHTML]="CurrentWeather.Temperature + ' ' + currentUnit"></h1>
     </div>

Resource for using async pipe

Answer 4

Utilize the async pipe with the observable location$.

<span class="locationName">{{(location$ | async).name}}</span>

current-weather.component.html

     <div class="left">
         <span class="locationName">{{(location$ | async).name}}/span>
         <span class="date">{{currentFullDate}}</span>
         <div class="weatherDescription">
             <img [src]="imageCurrentWeather" class="weatherIcon">
             <div class="weatherText">{{CurrentWeather.WeatherText}}</div>
         </div>
         <h1 [innerHTML]="CurrentWeather.Temperature + ' ' + currentUnit"></h1>
     </div>

Resource for using async pipe

Answer 5

Answer №3

You have switched the order of .pipe and select:

Give this a try:

this.location$ = this.store.select(CurrentLocationSelector).pipe(map((location)=> {return location;}))

If the issue persists, it may be due to the selector itself. Consider using createFeatureSelector:

import { createFeatureSelector, createSelector } from '@ngrx/store';
import { AppState } from './app.state';
export const APP_STATE_NAME = 'app';

const getAppState =
  createFeatureSelector<AppState>(APP_STATE_NAME);

export const getLocation = createSelector(getAppState, (state) => {
  return state.currentLocation;
});

Answer 6

You have switched the order of .pipe and select:

Give this a try:

this.location$ = this.store.select(CurrentLocationSelector).pipe(map((location)=> {return location;}))

If the issue persists, it may be due to the selector itself. Consider using createFeatureSelector:

import { createFeatureSelector, createSelector } from '@ngrx/store';
import { AppState } from './app.state';
export const APP_STATE_NAME = 'app';

const getAppState =
  createFeatureSelector<AppState>(APP_STATE_NAME);

export const getLocation = createSelector(getAppState, (state) => {
  return state.currentLocation;
});

Connect store variables to components using Angular's ngrx

Answer №1

Answer №2

Answer №3

Similar questions

Check to see if the upcoming birthday falls within the next week

Update the TemplateUrl according to the URL Parameters (GET)

Deconstructing Angular 2 Custom Pipes

Update a particular form field value prior to submission

Angular - Dropdown menu fails to display options

Imitating elegant angular input styles

Tips for creating a stylish, blurred, and centered box for a login form on a full-size background that is also responsive

Using Angular 8, you can create a reactive form that includes a custom ng-select component which has

information received from the socket is not displaying on the screen

Is there a way to use a single url in Angular for all routing purposes

How can I send a parameter to a function and retrieve it upon clicking in Angular?

Dynamic Dropdown Options in Angular 6 HTML Input Field

When considering Angular directives, which is more suitable for this scenario: structural or attribute?

Is it possible to categorize a JSON object based on its properties and then count the occurrences of each property within

AbstractControl is missing the 'controls' property in Angular4

How can one effectively monitor the advancement of a file transfer operation?

How to easily scroll to the top of the previous page in Angular 8

Angular 7 navigation successfully updates the URL, but fails to load the corresponding component

How to prevent users from accessing the app through standard web browsers in an Express/Electron application

The Angular HTTP service dependency injection does not provide a return value