Angular 6 run a function in every X seconds

Question

I have a function called

opensnack(text) { ... };

which is opening an angular material snackbar with the given text input.

What I

Answer 1

Angular 6 run a function in every X seconds

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
    selector: 'my-app',
    template: `<h2>
      Now {{time | date: 'hh:mm:ss'}}
      
      <hr /> 
      Now {{time$ | async | date: 'hh:mm:ss'}}
    </h2>`
})
export class AppComponent {
  time: Date;
  time$;

  constructor() {
    // First way: manual subscribe
    Observable
      .interval(1000)
      .map(() => new Date())
      .subscribe(res => this.time = res)

    // Angular way: by using the `async` pipe
    this.time$ = Observable.interval(1000).map(() => new Date())
  }
}

Answer 2

You can make use of rxjs library to run a function every X seconds.

import { interval } from 'rxjs';
import { takeWhile } from 'rxjs/operators';

...

 interval(1000)
    .pipe(takeWhile(() => !stop))
    .subscribe(() => {
      // place you code here
    });

The above code snippet will execute the subscribed statements every 1 second, until the stop condition is set to true.

Answer 3

Try to use setInterval

setInterval will allow to run a function regularly with the interval between the runs

https://javascript.info/settimeout-setinterval

Example:

function opensnack(text: string) : void {
  console.log(text);
}

setInterval(opensnack, 10000, "my text"); <-- run every 10 second

You can look at this stackblitz example:

Answer 4

export class AComponent implements OnInit {
  id: string = "1";
  mySub: Subscription;

  constructor(private http: HttpClient) {
    this.mySub = interval(8000).subscribe((func => {
      this.onIdSelect(this.id);
    }))
  }    
  ngOnInit(): void {
  }
  onIdSelect(id) {
    this.http.post('https://jsonplaceholder.typicode.com/posts', id).subscribe((res => {
      console.log(res);
    }))
    // this.mySub.unsubscribe(); 
  }
}

Import the interval and Subscription from rxjs. Here, code is calling the onIdSelect() method every 8seconds. So post response will be printed on the console after every 8seconds. If you want to call the method only once after 8seconds, then just unsubscribe the mySub variable.

Answer 5

Use interval from rxjs

Here's how:

import { interval, Subscription } from 'rxjs';

subscription: Subscription;

...

//emit value in sequence every 10 second
const source = interval(10000);
const text = 'Your Text Here';
this.subscription = source.subscribe(val => this.opensnack(text));

...

ngOnDestroy() {
  this.subscription.unsubscribe();
}

Alternatively, you can use setInterval which is available as method on the Window Object. So you don't need to import anything to use it.

intervalId = setInterval(this.opensnack(text), 10000);

...

ngOnDestroy() {
  clearInterval(this.intervalId);
}

Here's a SAMPLE STACKBLITZ for your ref.