Adjust an IntervalObservable's interval by incorporating a variable

I've encountered an issue with a component that needs to run code at regular intervals without pausing. I'm currently using an IntervalObservable and need to adjust the interval dynamically. While I can change the variable value using the setTime() function, the observable continues to run at its original interval set during creation. I'm unsure of how to make the observable update its interval. Any assistance would be greatly appreciated.

Component

@Component({
  selector: 'my-app',
  templateUrl: './graphs.component.html',
  styleUrls: ['./graphs.component.css']
})
export class GraphsComponent implements OnInit {
  selectedTime:number
  selectedRefresh=10

constructor() {

IntervalObservable.create(this.selectedRefresh*1000).subscribe(n => {
//DO THINGS
});
 }

 setTime() {

    this.selectedRefresh = selectedTime*60/(0.3*100)

  }

html

<form (keyup.enter)="setTime()"><input type="number" [(ngModel)]="selectedTime"  name="time" placeholder="enter mins" ngModel/></form>

Answer â„–1

From my understanding, the interval cannot be altered. The solution would be to unsubscribe from the current observable, create a new one, and then subscribe to it.

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

Automated Integration with Visual Studio Team Services: Empowering ASP.NET Core and Angular 4 Collaboration

I am currently working on an ASP.NET Core web app using Visual Studio 2017, and I am developing an Angular 4 front-end project in Visual Studio Code. The goal is for the Angular 4 project to be integrated with the Core web app, and I need to set up continu ...

Having trouble retrieving the selected dropdown value in Angular 5 using <p-dropdown> from PrimeNG due to issues with the ngOnInit function. Need some assistance with

My values are currently being populated in the ngOnInit() method, so the event is not available there. I need to retrieve the previously selected value even after refreshing the page. <p-dropdown [options]="Options" [(ngModel)]="Id" (onChange)="onChang ...

Utilize the array map function in a React Native functional component with useState to dynamically render content

I have successfully implemented a functional component that renders a basic form with input elements. My goal is to allow users to dynamically add input elements by clicking a button. To achieve this, I am utilizing the useState hook and have created an o ...

What location is the optimal choice for documenting logs at a debugging level?

My team and I have been deeply contemplating the best location for writing a debug-level log during our development process. We are utilizing winston in conjunction with winston-daily-rotate-file to separate out different aspects of logging, as well as ne ...

Prevent methods from being called in a Typescript class after they have already

I encountered a scenario where I need to exclude certain methods from the return type of a class method once they have been called. Consider a class named Setup with methods step1, step2, and step3. class Setup { step1() { return this; } ...

Unable to retrieve notes(data) from API using the user ID

I am trying to retrieve notes data from an API using user_id, but I am encountering difficulties in making the API call. Despite my attempts to log the error, I am unable to fetch the required data. Can someone assist me in identifying what might be miss ...

What is the method for specifying a null value in Typescript?

I'm curious if this code snippet is accurate, or if there's a better way to define it. Is there an alternative to using error!? I'm unsure of its meaning and would appreciate clarification. ...

Custom React component - DataGrid

Just starting out in the world of React and attempting to create a custom component with parameters. I'm curious about the correct approach for achieving this. Here's my current code snippet - how do I properly pass Columns, ajax, and datasourc ...

Utilizing nested services for enhanced functionality

I'm facing an issue with my folder structure: . ├── lib/ │ └── dma/ │ ├── modules/ │ │ └── cmts/ │ │ ├── cmts.module.ts │ │ └── cmts.service.ts │ └┠...

Encountered an issue while integrating CKEditor 5 into a standalone Angular 17 application: "Error: window is

Having trouble integrating CKEditor with my Angular app (version 17.1.2 and standalone). I followed the guide step by step here. Error: [vite] Internal server error: window is not defined at r (d:/Study/Nam3_HK3/DoAn/bookmanagement/fiction-managemen ...

What is the best way to get both the id and name of a selected item in Angular?

Within my select field, data is dynamically populated based on names. My objective is to not only capture the selected name but also its corresponding ID. Here's a snippet of my HTML template: <select class="custom-select d-block w-100" id="test" ...

Struggling to make Mongoose with discriminator function properly

I seem to be facing an issue with my schema setup. I have defined a base/parent Schema and 3 children schemas, but I am encountering an error message that says: No overload match this call Below is the structure of my schema: import { model, Schema } fr ...

The Express server automatically shuts down following the completion of 5 GET requests

The functionality of this code is as expected, however, after the fifth GET request, it successfully executes the backend operation (storing data in the database) but does not log anything on the server and there are no frontend changes (ReactJS). const ex ...

Releasing Typescript 2.3 Modules on NPM for Integration with Angular 4

Although there are instructions available in Writing NPM modules in Typescript, they are outdated and there are numerous conflicting answers that may not be suitable for Angular. Additionally, Jason Aden has delivered an informative presentation on youtu ...

Steps for configuring Angular app to run on a separate port from the http server

During the development phase, I am utilizing Angular2 CLI's "ng serve" command to host the application on localhost:4200. This method allows for quick rebuilds and automatic reloading of changes in the browser when a source file is modified. My appli ...

Working with JSON data in Angular 2 constructor

When sending a JSON response from the server, it is in the format shown below: {id: Int, name: String, childJSON: String} I want to map this data to the following TypeScript classes: export class Student{ constructor(public id: string, ...

proper method for adding line breaks in json

I am experiencing difficulty in creating a line break using \r\n with the given payload on this particular screen. I am on a quest to determine the correct json payload that needs to be dispatched to the frontend in order for it to register as a ...

Utilize the .mat-column-name attributes to apply custom styles to a nested component within Angular Material

Within the Child component, an Angular material table is created with columns passed as input: <table mat-table> <ng-container *ngFor="let col of columns" [matColumnDef]="col"> </table> @Input() columns: string[] T ...

Creating divs dynamically in a loop and displaying them upon clicking a button in Angular

I am trying to dynamically create divs in a loop and show the selected div when I press a specific button. In theory, this is how I envision it... <div>div1</div><button (click)="showDiv(divID)">showDIV</button> To hide a ...

Broadcasting TypeScript Data Structures via Socket.IO

In my Typescript code, I have created a basic User class as shown below: export class User { constructor(public id: string); } When I emit a message from my socket.io server, I include an instance of the User class like this: var user = new User(&ap ...