Ways to integrate an Rxjs timer with a user-triggered action

Question

Ways to integrate an Rxjs timer with a user-triggered action

Is there a way to maintain continuous polling every 60 seconds in an observable, while also triggering the API call again when a user takes action within the component? How can this be achieved?

Below is my current setup for the polling feature:

this.covidCases$ = timer(1, 60000).pipe(
      switchMap(() =>
        this.covidService.getCovidCases().pipe(
          map(data => {
            return data.cases;
          }),
        ),
      ),
      retry(),
      shareReplay(1),
    );

I then assign this observable to the component:

<case-list [covidCases]="covidCases$"></case-list>

angular typescript rxjs

Answer 1

Answer №1

If you want to combine different streams of data, consider using the merge operator. Here is an example snippet:

    const submitButton = document.getElementById('submit');
    const clickSource = fromEvent(submitButton, 'click');
    const mappedClicks = clickSource.pipe(map(event => `Clicked at: ${event.timeStamp}`));
    // Combining button clicks and a timer. Customize as needed
    const combinedStream = merge(timer(1, 5000).pipe(map(x => 'Hello')), mappedClicks);
    combinedStream.subscribe(result => console.log(result));

Answer 2

If you want to combine different streams of data, consider using the merge operator. Here is an example snippet:

    const submitButton = document.getElementById('submit');
    const clickSource = fromEvent(submitButton, 'click');
    const mappedClicks = clickSource.pipe(map(event => `Clicked at: ${event.timeStamp}`));
    // Combining button clicks and a timer. Customize as needed
    const combinedStream = merge(timer(1, 5000).pipe(map(x => 'Hello')), mappedClicks);
    combinedStream.subscribe(result => console.log(result));

Answer 3

Answer №2

To cater to your requirements, I recommend utilizing a combination of Subject and merge:

import { interval, Subject, merge } from 'rxjs'; 
import { mapTo } from 'rxjs/operators';

const first = interval(1000);
const subject = new Subject();

var userAction = () => {
  // perform an API call and then upon resolution
  subject.next('manual action!')
}

// combine outputs from all observables
const example = merge(
  first.pipe(mapTo('FIRST!')),
  subject.asObservable()
);
const subscribe = example.subscribe(val => console.log(val));

Check out the jsFiddle demo here

Answer 4

To cater to your requirements, I recommend utilizing a combination of Subject and merge:

import { interval, Subject, merge } from 'rxjs'; 
import { mapTo } from 'rxjs/operators';

const first = interval(1000);
const subject = new Subject();

var userAction = () => {
  // perform an API call and then upon resolution
  subject.next('manual action!')
}

// combine outputs from all observables
const example = merge(
  first.pipe(mapTo('FIRST!')),
  subject.asObservable()
);
const subscribe = example.subscribe(val => console.log(val));

Check out the jsFiddle demo here

Ways to integrate an Rxjs timer with a user-triggered action

Answer №1

Answer №2

Similar questions

Error encountered while parsing an Ionic template involving Ionic select, npm, and different versions of Ionic

What is the best way to choose an element within a component's template?

How can I prevent scrolling in Angular's cdk-virtual-scroll feature?

There was an error while compiling the Angular application using ng serve and ng build. The error occurred in the module build and seemed to be related to the Sass loader. The specific issue was an expected "}" that was

Tips on avoiding tab selection in ngx-bootstrap

Develop an NPM package by bundling various Angular2 components tailored for a CRUD (Create, Read

Obtain the popup URL following a fresh request using JavaScript with Playwright

Error with SwitchMap on ActivatedRoute.paramMap

Errors can occur when using TypeScript recursive types

The term 'shuterstock_init' is meant to be a type, however, it is mistakenly being treated as a value in this context

Setting the location of the global nprmrc file on a Windows operating system

Incorporating angular2 with fullpagejs requires loading fullpage js after successfully binding data within Angular

Angular: determining if the current route or page is secured by a guard

The functionality of Flowbite Drawer is disabled when used within an ngFor loop in Angular

ESLint detecting error with returning values in async arrow functions

What is the reason behind the equality comparison between number[][number] and number in TypeScript?

What is the best way to export a ReactTS component along with its children?

I must remove the thumb from the input range control

Using Arrow Functions in Angular 2 Typescript with Support for IE11

What is the best way to retrieve the Object key for the connected object in angularFire2?