Query values from firestore and connect it to a Mat Table as a datasource

Issue

I have a mat table and a select tag on my HTML component, I wish to query on a specific field only on my firestore database (there are only 2 fields under my documents inside the collection, Name and Area Code)

I'll be querying by Area Code only and display it on the Mat Table (for example Area Code 25), will only show names under that Area Code)

I've been trying my luck searching for proper sources but it seems there's nothing available.

TS Component

import { MatTableDataSource } from '@angular/material/table';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-members-sequencing',
  templateUrl: './members-sequencing.component.html',
  styleUrls: ['./members-sequencing.component.scss']
})
export class MembersSequencingComponent implements OnInit {

  dataSequenceSource: MatTableDataSource<any>;
  displayedSequenceColumns : string[] = [
    'customerNo',
    'customerZone',
    'customerName',
    'customerName',
    'customerAddress']

   private customerCollection: AngularFirestoreCollection<Customer>
   customers: Observable<Customer[]>

   constructor(public afs: AngularFirestore) {}

    applyFilterZone(zone: string) {
    this.zoneValue = zone;
    this.customerCollection = this.afs.collection('customer',
    ref => ref
    .where('customerZone','==', this.zoneValue));
    this.customers = this.customerCollection.valueChanges();

    // These part is where I'm stuck at since I don't know how to connect this one//
    
     this.dataSequenceSource = new MatTableDataSource(this.customers)

   

  }

}

I'm being prompted for this , which at this point I don't know what to do, apologies for being a Noob

Thank you for those who could help.

Solution

valueChanges() returns an Observable. In this case, the observable will send your application data every time the values in your customerCollection change. To get the data from an observable you need to subscribe.

    this.customers.subscribe(
      (data) => (this.dataSequenceSource = new MatTableDataSource(data))
    );

this.dataSequenceSource will now be automatically updated on value changes.

Answered By - Chris Hamilton