When there are multiple tabs open in the browser, I notice a difference in the time displayed. This occurs in an Angular 2 environment

https://i.sstatic.net/l4YQ1.pngAfter a successful login, I am fetching server time from the back-end (in Java) and adding 1 second at intervals.

      Observable.interval(1000).map(() => {
        return this.time.add(1, 'seconds');
      }).subscribe(currentServerTime => {
        this.currentServerTime = currentServerTime ;
        this.timerService.next(this.currentServerTime );
      }, error => {
        this._errorService.handleError(error);
      });

Every minute, another call is made to the server to fetch the current server time.

The server time displays correctly but when multiple tabs of the same webpage are opened, there is a time difference observed. Is there any way to sync all open tabs?

Answer №1

Encountering a similar problem, I decided to change to

this.interval = setInterval(() => { //perform actions }, 1000);
To remove it, simply utilize clearInterval(this.interval).

Keep in mind that Observables operate asynchronously, so if the tab is inactive, you may observe a doubling of time needed.

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

Trigger a click event on a nested Angular 13 component to remove a class from its grandparent component

In my Angular 13 project, I am working with 3 components: Child Component : Burger-menu Parent Component : Header Grand-Parent Component : app.component.html Within the burger-menu component, there is a close button. When this button is clicked, I want t ...

How can I specify the type of an object in Typescript to mirror a class's properties as a list?

This demonstration is kept simplistic and straightforward, yet the ultimate objective is far more intricate. It is crucial to grasp the method behind achieving this. Let's assume there exists a class class Foo { bar: string; baz: number; bob: a ...

Update the AngularJS (1.5) application to Angular 5

Looking for advice on transitioning an AngularJS app to Angular (in this case, version 5). I've been exploring the official documentation, but I still have some uncertainties. From what I gathered in the guide, it suggests migrating from AngularJS by ...

The specified starting point "@angular/material/card" cannot be accessed due to missing dependencies

When attempting to deploy a web application on Heroku, I encountered the following error message: - Generating browser application bundles (phase: setup)... Compiling @angular/core : es2015 as esm2015 Compiling @angular/common : es2015 as esm2015 Compiling ...

I am having trouble getting the bs-stepper to function properly within my Angular project

I am currently facing issues with the bs-stepper module in my Angular code. It is not functioning as expected and is throwing errors. Here is a snippet of my code: export class FileUploadProcessComponent implements OnInit { import Stepper from 'b ...

Azure Static Web App does not retrieve the connection string value from environment.prod.ts

After deploying my Angular App to Azure as a Static Web App, everything seemed to be running smoothly. However, I encountered an issue with the file "environment.prod.ts" in the environments folder within my app that contains the following code: export co ...

Using Typescript to create a generic return type that is determined by the type of a property within an object union

Consider the following scenario: type Setting = { key: "option_one", value: number, } | { key: "option_two", value: string, } export type SettingKey = Setting["key"]; // "option_one"|"option_two ...

Navigating through the nested object values of an Axios request's response can be achieved in React JS by using the proper

I am attempting to extract the category_name from my project_category object within the Axios response of my project. This is a singular record, so I do not need to map through an array, but rather access the entire object stored in my state. Here is an ex ...

Inheriting static attributes in Typescript without using the static keyword

My project involves utilizing multiple classes that represent entities from a database. abstract class Entity { static columns: Column[]; static showInNav: boolean; static dependencies: string[]; // non-static fields } class Entity_A exten ...

Tips for implementing a cascading dropdown feature in Angular 7 Reactive Formarray: Ensuring saved data loads correctly in the UI form

I recently found a helpful guide on stackoverflow related to creating cascading dropdowns in an Angular reactive FormArray, you can check it out here After following the instructions, I managed to achieve my desired outcome. However, I now face a new chal ...

How can I adjust the width of a td table in an Angular 6 component template using Bootstrap?

I am currently working on a project using Angular 6. Here is a snapshot of the screen I am working on: https://i.stack.imgur.com/hQLOI.png The screen consists of two main elements - an HTML table and a component that represents the table data in individ ...

What is the reason behind using 'npm install -g @angular/cli'?

While there are numerous inquiries about installing this npm package, I have not come across a precise answer that addresses my specific concern. I already have npm installed and have created several applications in Visual Studio. My question is, before s ...

Template specific requirements in Angular

When I have a child component app-page-header, here's what I want to achieve: If the value of headerOptions.headerTitle is not 'Idle Disposition', then set [titleData] to equal 'headerOptions.headerTitle'. However, if headerOptions ...

Exploring Angular 10: Managing Two Promises in ngOnInit

I am currently working on integrating the Strava API into my Angular app. To summarize briefly: When a user clicks on a button to connect to Strava They are redirected to Strava for authentication (using PKCE) Strava then redirects back to my app with a ...

"Refining MongoDB queries with a filter after performing a populate

I want to retrieve all records with populated attributes in a query. Here is the TypeScript code: router.get("/slice", async (req, res) => { if (req.query.first && req.query.rowcount) { const first: number = parseInt(req.qu ...

The npm build command is triggering an error message that reads "Allocation failed due to ineffective mark-compacts near heap limit."

I'm currently working on a ReactJS/TypeScript project on Windows 10. I've been running into issues when trying to build my TypeScript scripts using the following command: "rimraf ../wwwroot/* && react-scripts-ts build && copyfi ...

Using Angular 2 to trigger an event when a native DOM element is loaded

I am working towards my main objective of having a textarea element automatically focused upon creation. I recently came up with an idea to use e.target.focus() on the onload event. It would look something like this: <textarea rows="8" col="60" (load)= ...

Ways to verify if a value corresponds to a particular data type

Is there a more elegant way for TypeScript to check if a value matches a specific type without actually invoking it, instead of the method described below? Consider the following example: import { OdbEventProcessorFunc } from "./OdbEventProcessor&quo ...

There seems to be a glitch in the input found within the form array

Check out this Stackblitz demo Have you noticed a bug where the input loses focus when typing? Additionally, there seems to be a limit of only 4 symbols that can be typed. Any suggestions on how to fix this issue would be greatly appreciated. Thank you! ...

Subclass method overloading in Typescript

Take a look at this example: class A { method(): void {} } class B extends A { method(a: number, b: string): void {} } An error occurs when trying to implement method() in class B. My goal is to achieve the following functionality: var b: B; b.met ...