Angular8 : Refresh Data Realtime

Question

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`);
  }

Simone Nigro · Accepted Answer · 2021-04-05 07:04:43Z

1

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);
      }
    );
  }
}

answered Apr 5, 2021 at 7:04

Simone Nigro

4,9575 gold badges46 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular8 : Refresh Data Realtime

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related