Implementing debounce in Subject within rxjs/Angular2

I am currently building an events service, and here is the code snippet I am using:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

export interface IPosition {
    x:number
    y:number
}

export interface IPositionEvent {
    id: string
    position: IPosition
}

@Injectable()
export class ModelEventsService {
    position$:Subject<IPositionEvent>;

    constructor() {
        this.position$ = new Subject().debounce(500);
    }

}

However, TypeScript is throwing an error that says:

ERROR in /src/model-events.service.ts (20,49): Argument of type '500' is not assignable to parameter of type '(value: {}) => SubscribableOrPromise'.)

I have searched online for solutions, but most of them seem to be related to HTTP requests. I'm struggling to pinpoint exactly what the issue is.

It seems like I need to cast something, but I haven't been able to find the correct syntax to do so.

If I remove the .debounce(500), the service works fine and emits the events as expected.

Any thoughts, ideas, or help would be greatly appreciated!

Answer №1

The issue lies in the fact that you are utilizing the debounce operator, whereas it seems more appropriate to use the debounceTime operator.

debounce requires a selector function - as indicated in the error message - while debounceTime necessitates a timeout duration specified in milliseconds.

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

Loading SVG templates dynamically in Angular can be done by utilizing a string

Is it possible to convert SVG content loaded from a server into a component template in Angular, with the ability to bind properties to it? For example, <tspan [attr.color]="textColor" ...>{{myText}}</tspan>. I have tried loading and ...

ngRepeat momentarily displays duplicate items in the list

There is a modal that appears when a button is clicked. Inside the modal, there is a list of items that is populated by data from a GET request response stored in the controller. The issue arises when the modal is opened multiple times, causing the list t ...

Class with an undefined function call

Currently, I am working with angular2 and TypeScript where I have defined a class. export class Example{ //.../ const self: all = this; functionToCall(){ //.. Do somerthing } mainFunctionCall(){ somepromise.then(x => self.fu ...

Storing a Vue/JS element reference in a constant using Typescript

In my template, I have one form element and one button element: <button type="submit" id="ms_sign_in_submit" ref="submitButton" class="btn btn-lg btn-primary w-100 mb-5"> </button> Wi ...

experimenting with a component function triggering the execution of a separate method

Consider the following basic component : import { Component} from '@angular/core'; @Component({ selector: 'app-component' }) export class AppComponent { foo() { this.bar(); } bar() { console.log('hello'); ...

Struggling to modify a string within my React component when the state is updated

Having a string representing my file name passed to the react-csv CSVLink<> component, I initially define it as "my-data.csv". When trying to update it with data from an axios request, I realize I may not fully understand how these react components w ...

Deactivating a form field depending on a selected radio button in Angular 2

If I have two radio buttons, with a click function called localClick for the first button to give value 1 and the second button to give value 2. <div class="ui-g-12"><p-radioButton name="group1" value="Local" (click)=localClick(1) label="Local"&g ...

I lost my hovering tooltip due to truncating the string, how can I bring it back in Angular?

When using an angular ngx-datatable-column, I added a hovering tooltip on mouseover. However, I noticed that the strings were too long and needed to be truncated accordingly: <span>{{ (value.length>15)? (value | slice:0:15)+'..':(value) ...

Make sure to always target a specific DIV element, regardless of whether any of its child divs are

I have a div named "box" nested inside another div called "container." When I click on the box, I am able to retrieve its ID perfectly. However, when I click on the container, I want to obtain the ID of the box instead of the container. Is there a way fo ...

Discover the perfect way to implement true lazyloading using NativeScript Angular tabs and BottomNavigation

Currently working on an app using nativescipt, I've successfully added BottomNavigation with lazy loading and Tab components in child pages. The code structure resembles the following: export const routes: Routes = [ { path: '', red ...

Switching from a TypeOrm custom repository to Injectable NestJs providers can be a smooth transition with the

After updating TypeORM to version 0.3.12 and @nestjs/typeorm to version 9.0.1, I followed the recommended approach outlined here. I adjusted all my custom repositories accordingly, but simply moving dependencies into the providers metadata of the createTe ...

What is the reason behind being unable to register two components with the same name using React Hook Form?

I have encountered an issue while using the useForm hook from React Hook Form library. Due to the specific UI library I am using, I had to create custom radio buttons. The problem arises when I try to register two components with the same name in the form ...

Increasing response buffer size in Node.js fetch for version 2.x.x

Currently in the process of implementing an API request using nodejs-fetch and I've encountered an issue. The documentation states that the maximum buffer size for fetch is 16kB, but the response I need to retrieve is 53 kB. This causes the .fetch() f ...

Trying to Grasp the Concept of Angular Bootstrap AutoComplete

I am trying to make sense of this code snippet. Within the code at line 44, there is something like search = (text$: Observable) => When I hover over 'search', Intellisense indicates (property) of NgbdTypeaheadHttp.search I'm confused ...

Issue with customizing border color in Mui text field

Why is the border color of the Mui textField not remaining black when the user enters or selects data for the input fields? It still shows blue as in the photo. Here is the code: enter image description here.Here is the code. I'm wondering why this i ...

Exporting a module from a TypeScript definition file allows for seamless sharing

I am in the process of developing a definition file for the Vogels library, which serves as a wrapper for the AWS SDK and includes a property that exports the entire AWS SDK. declare module "vogels" { import AWS = require('aws-sdk'); export ...

Having trouble finding the "make:migration" command in Adonis 5 - any suggestions?

After reviewing the introductory documentation for Adonis Js5, I attempted to create a new API server. However, when compiling the code using "node ace serve --watch" or "node ace build --watch", I kept receiving an error stating "make:migration command no ...

Having difficulty executing the Cypress open command within a Next.js project that uses Typescript

I'm having trouble running cypress open in my Next.js project with Typescript. When I run the command, I encounter the following issues: % npm run cypress:open > [email protected] cypress:open > cypress open DevTools listening on ws: ...

Weighing the importance of a multiple-choice quiz

I am faced with the challenge of assessing 25 multiple choice questions, each offering 4 answer choices worth varying points. Additionally, I have 2 free response questions that I wish to score based on the time taken to answer them. My proposed scoring ru ...

Error encountered with TypeScript template literals strings type

There's a new feature in the latest version of Typescript that allows the use of template literal strings as types, like this: type Hey = 'Hey'; type HeyThere = `${Hey} There`; It works perfectly in the Typescript playground with version 4 ...