How to clear Observable in Angular?

Question

I want to clear an observable object array. What I did:

private pages: Observable<CustomPage[]>;
//clear
this.pages.map(p => p = []);

Is there a direct Observable method(rxjs) to do this without mapping?

Maybe you can explain what you're trying to achieve. An observable is a stream of events, so you cannot actually clear it. By mapping it to an empty array you'll transform all the emitted values to that and I'm not sure this is what you want. — Adrian Fâciu, Aug 26 '17 at 08:41
Sorry about that. My goals is: A service returns a set of Custom pages for a given date selected using a date picker. So let's say I get custom pages for day d1 and when I select another day d2 from date picker, it should clear the Custom page array, make a new http request and populate the new values. — Maddy, Aug 26 '17 at 08:47

Alan Richards · Answer 1 · 2020-04-28T19:32:42.263

8

I found this works really well and is very straight forward.

this.someObservable = of([]);  <-- Assigning empty array to an observable.

The ' of ' is a part of the rxjs library and returns an observable so you can use it here with the assignment operator.

Hope this helps :)

edited Apr 28 '20 at 19:32

answered Mar 02 '20 at 21:23

Alan Richards

283
5
17

1

Excellent.. Work like charm – Ghayyas Mubashir Jul 05 '20 at 11:02

score 2 · Accepted Answer · answered Aug 28 '17 at 16:12

If you're coming from the tour of heroes tutorial your understanding may be limited by the pretty basic services they show there. Here is a quick sketch of a more fully fleshed out service that does what you want...

export class PageService {

  private _pages = new ReplaySubject<CustomPage[]>(1);

  private _dateFilter = new ReplaySubject<DateFilterCriteria>(1);

  //Subscribe to this in your component
  get pages(): Observable<CustomPage[]> {
    return this._pages;
  }

  //Use this if you want to display the currently selected date
  //filter somewhere (e.g. on your date filter control)
  get dateFilter(): Observable<DateFilterCriteria> {
    return this._dateFilter;
  }

  //PageAccess encapsulates requests against the Http service
  constructor(private pageAccess: PageAccess) {
    this._dateFilter.subscribe(dateFilter => this.fetchPages(dateFilter));
    this.setNewDateFilter(null);
  }

  //Clears out the current list of pages, issues a new request
  //for pages
  private fetchPages(dateFilter: DateFilter) {
    this._pages.next([]);
    this.pageAccess.fetchPages(dateFilter).subscribe(pages => {
      this._pages.next(pages);
    });
  }

  //When your date filter control changes it should call this
  //method
  setNewDateFilter(dateFilter: DateFilter) {
    this._dateFilter.next(dateFilter);
  }

}

Also, I think I used DateFilter and DateFilterCriteria interchangeably to represent some class that you use to indicate what dates of pages you want.

score 2 · Answer 3 · answered Sep 27 '19 at 12:04

2

Short and Sweet

new Observable<[]>();

answered Sep 27 '19 at 12:04

async_soul

143
1
8

This is the only one that worked for me e.g: `this.list$ = new Observable` as when I search it starts observing again and populate the DOM. `of([])` didn't – Juliano Vargas May 16 '22 at 14:21

How to clear Observable in Angular?

3 Answers3