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?

Answer 1

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$

Answer 2

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 .

Answer 3

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

    ...