CODEWITHSUNDEEP
javascriptangular
user15296624
user15296624

Reputation:

Angular8 : Refresh Data Realtime

I have code in app.component, which get all users

I am trying to refresh my page every second, because if i have 2 opened windows and make any CRUD actions, second window will show old data, without new developer / etc.

I am trying to use ngOnDestroy, but it does not work:

export class AppComponent implements OnInit{
  interval = interval(1000); // 1s 

  ngOnDestroy() {
    if (this.interval) {
      // @ts-ignore
      clearInterval(this.interval);
      this.getDevelopers();
    }
  }


  public getDevelopers(): void {
    this.developerService.getAllDevelopers().subscribe(
      (response: GetByIdDeveloperResponse[]) => {
        this.developers = response;
      },
      (error: HttpErrorResponse) => {
        alert(error.message);
      }
    );
  }
}

How looks my service method:

  public getAllDevelopers(): Observable<GetByIdDeveloperRequest[]> {
    return this.http.get<GetByIdDeveloperResponse[]>(`${this.apiServerUrl}/api/v2/developers`);
  }

Upvotes: 1

Views: 278

Answers (1)

Simone Nigro
Simone Nigro

Reputation: 4897

interval from rxjs is a Observable, and you need to subscribe for attach an event

import { interval } from 'rxjs';

export class AppComponent implements OnInit, OnDestroy {
  $interval = interval(1000); // 1s
  subInterval;

  ngOnInit() {
      this.subInterval = this.$interval.subscribe(() => this.getDevelopers());
  }

  ngOnDestroy() {
    // destroy subscription
    if( this.subInterval ){
        this.subInterval.unsubscribe();
    }
  }


  public getDevelopers(): void {
    this.developerService.getAllDevelopers().subscribe(
      (response: GetByIdDeveloperResponse[]) => {
        this.developers = response;
      },
      (error: HttpErrorResponse) => {
        alert(error.message);
      }
    );
  }
}

Upvotes: 1

Related Questions