Ways to trigger a function in Angular every 10 seconds

What is the method to utilize Observable function for fetching data from server every 10 seconds?

Custom App service

    fetchDevices (): Observable<Device[]> {
    return this.http.get(this.deviceUrl)
      .map(this.extractData)
      .catch(this.handleError);
}

App Component

ngOnInit():void {
    this.retrieveData();
    this.showLastDeviceInterior();
    this.displayOutDevice();
    this.obtainSettings();
  }

  retrieveData()
  {
    this.dataService.fetchDevices().subscribe( devices => this.devices = devices,
      error =>  this.errorMessage = <any>error);
  }

Answer №1

If you're working with Angular, consider using setInterval to fetch data:

  fetchData()
  {
      setInterval(() => {
           this.apiService.getData().subscribe(data => this.data = data,
           error =>  this.errorMessage = <any>error);
       }, 10);
  }

OR

   setInterval(() => {
       this.fetchData();
   }, 10);

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

Tips on injecting configuration into forRoot

Is there a method to inject configuration object into AppModule's forRoot() function? How can I access the configService if there is no constructor within the module? config.yml: smtp: host: 'smtp.host.com' port: 10 secure: true aut ...

Ways to customize background color for a particular date?

I have been using the fullcalendar npm package to display a calendar on my website. I am trying to figure out how to set a background color for a specific selected date. I tried looking into this issue on GitHub at this link. However, it seems that dayRe ...

What could be causing the HTTP response Array length in Angular to be undefined?

Currently, I am facing an issue while retrieving lobby data from a Spring Boot API to display it in my Angular frontend. After fetching the data and mapping it into an object array, I encountered a problem where the length of the array turned out to be und ...

Type of JavaScript map object

While exploring TypeScript Corday, I came across the following declaration: books : { [isbn:string]:Book}={}; My interpretation is that this could be defining a map (or dictionary) data type that stores key-value pairs of an ISBN number and its correspon ...

Steps for adjusting the matMenuTriggerFor area so it only triggers when hovering over the arrow

Hello there! I'm currently working on adjusting the trigger area for opening the next menu panel. Right now, the next menu panel opens whenever I hover over either the title or the arrow. However, my goal is to have the menu open only when I hover ove ...

Error in Angular ngFor loop: Type 'OrderItem' is not compatible with type 'Iterable<any>'

In my HTML code, I have the following structure: <div class="grid mb-5" *ngFor="let orderItem of order.orderItems"> <div class="col-2">{{ orderItem.product.name }}</div> <div class="col-2&qu ...

Is it possible to assign a template to an object variable within an ngFor loop in Angular?

In my app-projects template, I have a list of ProjectComponent items. For each ProjectComponent item in the list, there is an app-project template. <ul> <li *ngFor="let project of projects"> <app-project></app-project> </li&g ...

Utilizing Angular Material Table to present information efficiently

I have a unique data structure that I need to present using mat-table. dataSource= [[1,2],[3,4],[5,6]] In this structure, dataSource[0] always serves as the heading, with the rest of the array items representing its rows. Therefore, the expected output ...

Determining the return type of a function by analyzing its argument(s)

I'm interested in defining a method within a class that will have its type based on the argument provided in the constructor. For example: class A { private model: any; constructor(model: any) { this.model = model; } getModel( ...

How to Send Data with NodeJS by Utilizing the Finish Event

Is there a way to retrieve the JSON data sent during the nodejs finish event? This is how I send the JSON data: oResponse.json({ version: "1.0.0", author: "Someone", contributors: "also Someone" }); I would like ...

Registering a function for chart.js plugins that manipulates external data

Is there a way to pass external data to the chart.plugins.register function? I'm struggling because I can't access the necessary context: Chart.plugins.register( { beforeDraw: function (chart) { //implementation } }); I attempted using ...

Encountering a Angular 12 Observable<Object[]> Error while attempting to execute a GET request

I've been grappling with this error I encountered while working on Angular 12. Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. This is the code f ...

Tips on dynamically translating resources using ngx-translate

Can anyone help me with ngx-translate? I'm struggling to figure out how to dynamically translate resources in HTML. Here's an example: "agreement.status.0": "New", "agreement.status.1": "Rejected", ...

The Angular 4 iframe fails to show the content from the src link webpage

Template: <iframe width="100%" height="100%" [src]="url"></iframe> Component : I have successfully converted the URL into a safeUrl: ngOnInit() { this.url = this.sanitizer.bypassSecurityTrustResourceUrl('https://www.google.com/ ...

The rxjs package is failing to meet the peerDependencies requirements of its sister packages

After running npm install, I came across this error: npm ERR! Windows_NT 6.1.7601 npm ERR! argv "c:\\Program Files\\nodejs\\node.exe" "c:\\Program Files\\nodejs\\node_modules\\npm\ ...

Stop the items from moving around in a cdkDropList in Angular Material

I am encountering an issue with the Drag and Drop feature in Angular Material (Angular 8). Here is the code I have developed: <div class="example-container"> <div id="receiver-container" cdkDropListOrientation="horizo ...

Tips for incorporating IntersectionObserver into an Angular mat-table to enable lazy loading功能?

I am looking to implement lazy loading of more data as the user scrolls down the table using IntersectionObserver. The container I am using is based on the Bootstrap grid system. However, despite using the code below, the callback function is not being tri ...

Angular allows for dynamic sourcing of iframes

I have encountered an issue while trying to integrate a payment system with Angular. The payment gateway API I am using provides the 3D Secure Page as html within a JSON response. My approach is to display this html content within an iframe, however, the h ...

Jest throws an error: require function is not defined

I've been struggling with an issue in Angular for the past 3 days. I'm using [email protected] and [email protected]. I even tried downgrading and testing with LTS versions of node and npm, but I keep encountering the same error. Here ...

Tips for troubleshooting the error message: "The relative import path "$fresh/dev.ts" is not prefaced with / or ./ or ../"

My editor is showing a TypeScript error for a Deno module I am working on. The import path "$fresh/dev.ts" should be prefixed with / or ./ or ../ I have an import_map.json file set up with the following content. { "imports": { "$fre ...