pay attention to fluctuations in the observable's value

I am currently working on utilizing Ionic's loadingcontroller alongside a firestore query. From my understanding, this query returns an observable and also monitors changes in the query's value.

However, is there a way to determine within the function if the observable's value has changed? The issue I am facing is that the loader appears every time a click event occurs, even if there have been no changes. I would like the loader to only display if the result of the query has actually changed.

Here is my desired implementation:

category(category){
  let loading = this.load.create({
    content: 'Please wait...'
  });

  this.selected = category;

  this.fsp.getCategory(category).subscribe(res => {
    if(res has changed){
      loading.present();
      this.data = this.group.groupEvents(res);
      loading.dismiss();
    } else {
      this.data = this.group.groupEvents(res);
    }
  });

}

Answer №1

It's been a while since I've worked with Firestore, so I can't say for certain. One potential solution could be to use the valueChanges() method to retrieve the "current" value, store it in a variable, and then compare it against the new value each time the subscription updates to determine the necessary actions to take.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Easily Organize Your Data with Kendo React Grid: Rearrange Columns and Preserve Your Custom Layout

Currently, I am working on implementing a Kendo React grid with the option set to reorderable={true} for allowing column reordering. However, I am facing difficulty in determining how to save the new order of columns. Which event should I use to detect whe ...

Decorators do not allow function calls, yet the call to 'CountdownTimerModule' was executed

While building production files, the aot process is failing with this error message: Function calls are not supported in decorators but 'CountdownTimerModule' was called. I run the build command using npm run build -- --prod --aot and encounter ...

Error when casting Typescript await toPromise

I encountered the following issue: export class FloorManagerComponent implements OnInit { public meta = { list: [], building: Building, loading: true, }; constructor( private router: Router, private ac ...

Utilizing the useContext hook within a strictly Typescript-based class component

I have developed a pure Typescript class that serves as a utility class for performing a specific task. Within this class, I have created a context that is intended to be used universally. My goal is to utilize this context and its values within the pure T ...

Tips for sending the image file path to a React component

Hey, I'm working on a component that has the following structure: import React from "react"; interface CInterface { name: string; word: string; path: string; } export function C({ name, word, path }: CInterface) { return ( < ...

Generate a result map from an emitted observable without the need to wait for the inner observable

In my current code, I have the following setup: obsC$: Observable<Result[T][]> = combineLatest([this.obsA$, this.obsB$]). pipe(map(([resultA, resultB]) => ...), switchMap(this.serviceA.fetch(resultA).pipe(map((resultD) => ...))) ) The issue ...

Can you explain the purpose of the .subscribe() function?

Currently, I am in the process of developing an API using Angular2 and NodeJS. My focus has been on implementing services for my API that are responsible for retrieving a list of tasks and presenting them. Below is the code snippet for the task service: i ...

Combine array elements in Angular/Javascript based on a certain condition

Is there a way to combine elements from two arrays while avoiding duplicates? array = [ {id: 1, name:'abc'},{id: 1, name:'xyz'},{id: 2, name:'text1'},{id: 2, name:'text2'} ]; The desired output is: result = [{id: ...

The utility of commander.js demonstrated in a straightforward example: utilizing a single file argument

Many developers rely on the commander npm package for command-line parsing. I am considering using it as well due to its advanced functionality, such as commands, help, and option flags. For my initial program version, I only require commander to parse ar ...

Building an Elegant Tab Menu with Ionic 2 Components

Just diving into the world of Ionic 2 and Angular 2. I'm attempting to include a tab menu component in some of my pages, but struggling. Here's the code for the menu.component.ts file: import { Component, OnInit } from '@angular/core' ...

There seems to be a compatibility issue between Angular 16 and Bootstrap 5 styling

In my angular.json, I have defined my styles in the following way: "styles": [ { "input": "node_modules/bootstrap/dist/css/bootstrap.min.css", "bundleName": "ltrCSS" }, { "input": "node_mod ...

Discovering all imported dependencies in a TypeScript project: A step-by-step guide

Currently, I am attempting to consolidate external libraries into a vendor bundle through webpack. Instead of manually listing dependencies, I would like to automate this process by scanning all TypeScript files in the directory and generating an array of ...

Can you explain the concept of interface with dual function type declarations and provide guidance on its implementation?

interface MyInterface { (choose: string): number; (item: number): string; } Can you provide guidance on using the MyInterface interface mentioned above? How would it be helpful in practical situations? ...

Clearing the require cache in Node.js using TypeScript

I need to repeatedly require a module in TypeScript and Node for testing purposes. I came across an approach on this post which suggests the following code snippet: const config = require('./foo'); delete require.cache[require.resolve('./fo ...

Updating the image source attribute using Vue.js with TypeScript

Let's discuss an issue with the img tag: <img @error="replaceByDefaultImage" :src="urls.photos_base_url_small.jpg'"/> The replaceByDefaultImage function is defined as follows: replaceByDefaultImage(e: HTMLImageElement) ...

What is the process of creating an asynchronous function that will resolve a promise when the readline on('close') event is triggered within it in Typescript?

Here's a code snippet I'm working with: private readFile() { var innerPackageMap = new Map<string, DescriptorModel>(); // Start reading file. let rl = readline.createInterface({ input: fs.createReadStream(MY_INPUT_FILE ...

Is there a way to address the sporadic behavior of rxjs combineLatest when used in conjunction with ReplaySubject

My current struggle lies within this particular example: const r1 = new ReplaySubject(2); const r2 = new ReplaySubject(2); r1.next('r1.1'); r1.next('r1.2'); r2.next('r2.1'); combineLatest([r1, r2]).subscribe(console.log); // ...

Introducing cutting-edge intellisense for Typescript Vue in VSCode, featuring automatic import functionality specifically designed for the

Currently, I am working on a small project using Typescript and Vue in VSCode. In my setup, I have TSLint, TSLint Vue, Vetur, and Prettier plugins installed. Unfortunately, I am facing an issue with the intellisense "auto import" feature. It does not seem ...

Angular 11 is indicating that the type 'File | null' cannot be assigned to the type 'File'

Hey there, I'm currently diving into Angular and I'm working on an Angular 11 project. My task involves uploading a CSV file, extracting the records on the client side, and saving them in a database through ASP.NET Web API. I followed a tutorial ...

Opting for a .catch over a try/catch block

Instead of using a traditional try/catch to manage errors when initiating requests like the example below: let body; try { const response = await sendRequest( "POST", "/api/AccountApi/RefundGetStatus", JSON.stringify(refundPara ...