How to reload the observable http in Angular?

Question

I have a chart component that loads data from http:

export class BarChartComponent implements OnInit {
    dataObservable: Observable<any>;
    
    constructor(private httpClient: HttpClient){
         this.dataObservable =  this.httpClient.get<any[]>(response.dataEndpoint);
    }
    
    ngOnInit() {
        this.dataObservable.subscribe((data: any) => {
            //draw chart
        })
    }
    
    search() {
        this.dataObservable = this.httpClient.get<any[]>(`${this.dataEndpoint}/category=123`);
        
        this.dataObservable.subscribe((data: any) => {
            //draw chart
        })
    }
}

I set the dataObservable in constructor and subscribed in ngOnInit() function. But I changed the URL using a querystring and get a request again. So I subscribed again to new. But I have subscribed in ngOnInit().

Can I reload observable without subscribing again?

Observables aren't able to do that, but you could use a Subject for that. — Carlos
– Carlos, Commented Mar 6, 2020 at 8:18

Nikita Fedyashev · Accepted Answer · 2021-03-03 10:17:20Z

5

Everything that needs to be changed over time can be pushed into a subject. With this in mind the following solution should fit your needs:

export class BarChartComponent implements OnInit {
  url$: Subject<string> = new Subject();
  
  dataObservable$: Observable<any> = url$.pipe(
    switchMap(url => this.httpClient.get<any[]>(url))
  );
  
  search(url) {
    this.url$.next(url);
  }
  
  ngOnInit() {
    this.dataSubscription = this.dataObservable.subscribe((data: any) => {
      //draw chart
    })
  }
  
  ngOnDestroy() {
    this.dataSubscription.unsubscribe();
  }
}

Whenever the url$ changes you push it to the subject. Then you reach the inner httpClient get function via the switchMap. This will request with the new URL and respond to your dataObservable$

edited Mar 3, 2021 at 10:17

Nikita Fedyashev

19.3k15 gold badges58 silver badges110 bronze badges

answered Mar 6, 2020 at 8:31

Jonathan Stellwag

4,3055 gold badges30 silver badges58 bronze badges

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

2 Comments

Carlos Over a year ago

Don't you mean everything that needs to be changed over time can be pushed into a Subject?

Jonathan Stellwag Over a year ago

Subject, BehaviorSubject, ReplaySubject - all extend Observable. But I adjust it for reading purpose.

20B2 · Accepted Answer · 2020-03-06 08:51:35Z

0

You may use async pipe.

Assign the http call result to a subject variable in component.

export class BarChartComponent implements OnInit {
    dataObservable: Subject<any>;

    constructor(private httpClient: HttpClient){}

    ngOnInit() {
        this.dataObservable =  this.httpClient.get<any[]>(GET_URL);
    }

    search() {
        this.dataObservable = this.httpClient.get<any[]>(GET_URL);
    }
}

Then subscription can be handled in html file as below:

<div *ngFor="let item of dataObservable | async">
    // code here
</div>

Or

<ng-container *ngIf="dataObservable | async as items">
    // result can be accessed by items
</ng-container>

You may read further here or here.

answered Mar 6, 2020 at 8:51

20B2

2,15120 silver badges30 bronze badges

1 Comment

Serhii Over a year ago

This will cause page scroll to most top, when you have long list of the iterable items. This happens due to View re-render itself when you subscribe to same observable

mamichels · Accepted Answer · 2020-03-06 08:04:12Z

-1

If you have any observable which is not finalized you should always unsubscribe from it.

export class BarChartComponent implements OnInit, OnDestroy {
    dataObservable: Observable<any>;
    dataSubscription: Subscription;

    constructor(private httpClient: HttpClient){
         this.dataObservable =  this.httpClient.get<any[]>(response.dataEndpoint);
    }

    ngOnInit() {
        this.dataSubscription = this.dataObservable.subscribe((data: any) => {
            //draw chart
        })
    }

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

    ...

answered Mar 6, 2020 at 8:04

mamichels

6494 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to reload the observable http in Angular?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related