Filter data from Firestore whit angularfire

Question

I'm trying to filter data from Firestore with Angularfire's Querying Collection: https://github.com/angular/angularfire2/blob/master/docs/firestore/querying-collections.md I'm a bit confused with the approach. I have managed to filter through a button but I do not know how to reset or remove that filter once done.

What is the correct way to filter and reset said filter?

Here I have a stackblitz: https://stackblitz.com/edit/query-collections-in-angularfire2

My code so far:

service.ts

filterBy() {
  this.avisos = this.afs.collection('avisos', ref => ref.where('categoria','==', 'Vehículos' )).valueChanges()
  return this.avisos;
};

myComponent.ts

filtrarData() {
  this.avisos = this.fs.filterBy()
  return this.avisos;
};

myComponent.html

<button (click)="filtrarData()" class="btn btn-outline-primary">Vehículos</button>

Answer 1

In your firebase service, there are two methods, one to get the collection with no filters and one to get the collection filtered by a given 'categoria'.

In your component, when gets initialized ( ngOnInit() function) you call the method from the service to retrieve the whole collection; and then the button 'Vehiculos' triggers the function filtrarData() with the given 'categoria' from your service.

After it has been filtered, if you want to "clean" the filter and get the whole collection back, it would be as easy as having a button calling the same as ngOnInit() is doing and then your array this.avisos would have again the whole collection:

app.component.ts

  ngOnInit() {
    this.getAvisos()
  }

  getAvisos() {
      this.avisos = this.fs.getDomiciliarios()
  }

  filtrarData() {
      this.avisos = this.fs.filterBy()
  }

then in the html of the component app.component.html :

<button (click)="getAvisos()" class="btn btn-outline-primary btn-sm mx-1">Clean Filters</button>
<span>Filter by:</span>
<button (click)="filtrarData()" class="btn btn-outline-primary btn-sm mx-1">Vehículos</button>
<hr>

By the way, notice that there is no need to do the return this.avisos line in the app.component.ts, that would only be needed for the service.

Additionally, would be good if you standardise a bit the firebase.service function to get the collection filtered by 'categoria' with an argument, in case you want to call it for more than one type of 'categoria':

firebase.service.ts

filterBy(categoriaToFilter: string) {
    this.avisos = this.afs.collection('avisos', ref => ref.where('categoria','==', categoriaToFilter )).valueChanges()

    return this.avisos;
};

so now in your app.component.html you could have something like:

<button (click)="filtrarData('Vehículos')" class="btn btn-outline-primary btn-sm mx-1">Vehículos</button>

<button (click)="filtrarData('Casa')" class="btn btn-outline-primary btn-sm mx-1">Casa</button>

but take into account that your component app.component.ts would then include:

filtrarData(categoriaToFilter: string) {
    this.avisos = this.fs.filterBy(categoriaToFilter)
}