Angular component which shows a score which should update automatically

Question

I am very new to angular. I am trying to build a small app which shows scores of 3 teams on a page.

So I have an API which returns score of a team based on the ID we pass

But my confusion is how to achieve it the best way??

Do I need to create a function which calls the API in an interval

Then I thought if I add a 5 second interval, if there is multiple score changes in that 5 seconds we miss one, isnt it?

Also when due to heavy traffic or hit to the server and if one request take more than 5 second, then the next interval fires which could ends up calling the same before the previous one finishes.

So how can I make it the best way. I am working in Angular 10

Answer 1

First of all, polling is an old way. Polling means just calling the API in interval, which is an old way. You need to build that function as socket and subscribe that score changes from your side. This is the way.

If you really impossible to change the API in socket, you can do that using any kind of javascript way, pure javascript or rxjs or whatever.

import { interval } from 'rxjs';

interval(milisec).subscribe(() => this.service.callTheAPI());