Refreshing a component in Angular 6

Question

I am designing a dashboard based on angular 6 . My dashboard has several different components arranged together. I want to refresh a component after every 5 minutes.

I have tried windows.location.reload() and location.reload() however it is refreshing the entire page and not just one component , ie to be specefic all my components are getting refreshed. So, please help and thanks in advance.

Answer 1

Try this out

constructor(private ref: ChangeDetectorRef) {    
setInterval(() => {
  this.ref.detectChanges();
 }, 5000);
}

Answer 2

Here you go,

import {Observable} from 'rxjs'; // Angular 6 
// import {Observable} from 'rxjs/Rx'; // Angular 5

  Observable.interval(1000).subscribe(x => {
    this.router.navigateByUrl('/RefreshComponent', {skipLocationChange: true}).then(()=>
    this.router.navigate(["Your actualComponent"]));
  });

OR

import {Observable} from 'rxjs'; // Angular 6 
// import {Observable} from 'rxjs/Rx'; // Angular 5

  Observable.interval(1000).subscribe(x => {
    this.ngOnInit();
  });

Answer 3

The following worked for me

ngOnInit(): void {
  setTimeout(() => { this.ngOnInit() }, 1000 * 10)
  //Interval = 10secs
}