Angular Mat Chips using AngularFire

Question

I'm trying to follow the Mat Chips documentation here; however Instead of hardcoding the values, I'm trying to connect it thru my firestore database via angularfire.

firestore database:

however I'm kinda lost to the part wherein how to connect it properly. TS Component doesn't show any error, however whenever I load the HTML component, I get this error

[]

here's my code if you could help find what's the problem here:

HTML:
    <mat-form-field class="form-date" appearance="standard">
      <mat-label>Plumbers</mat-label>
        <mat-chip-list #chipList aria-label="Plumber selection">
            <mat-chip
               *ngFor="let plumber of plumbers"
               (removed)="remove(plumber)">
                {{plumber}}
                <button matChipRemove>
                <mat-icon>cancel</mat-icon>
                </button>
                </mat-chip>
                  <input
                    placeholder="Add Plumber..."
                    #plumberInput
                    [formControl]="plumberCtrl"
                    [matAutocomplete]="auto"
                    [matChipInputFor]="chipList"
                    [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                    (matChipInputTokenEnd)="add($event)">
                </mat-chip-list>
                <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
                  <mat-option *ngFor="let plumber of filteredPlumbers | async" [value]="plumber">
                    {{plumber}}
                 </mat-option>
                </mat-autocomplete>
       </mat-form-field>

Service TS

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument} from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs/Observable';
import {map } from 'rxjs/operators';

import { plumberModel } from '../models/plumberModel';

@Injectable({
  providedIn: 'root'
})
export class CustomerService {
  plumberCollection: AngularFirestoreCollection<plumberModel>;
  plumbers: Observable<plumberModel[]>;

 constructor(
    public angularFireStore: AngularFirestore

  ) 
  {}

 getPlumbers() {
    this.plumberCollection = this.angularFireStore.collection('plumber');
    this.plumbers = this.plumberCollection.valueChanges();
    return this.plumbers
  }
}

Model

export class plumberModel {
    plumberName: string;
}

Component TS

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { CustomerService } from 'src/app/services/customer.service';
import { Customer } from 'src/app/models/customer.model';
import { Observable} from 'rxjs';
import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {FormControl} from '@angular/forms';
import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
import {MatChipInputEvent} from '@angular/material/chips';
import {map, startWith} from 'rxjs/operators';

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

     separatorKeysCodes: number[] = [ENTER, COMMA];
     plumberCtrl = new FormControl();
     filteredPlumbers: Observable<plumberModel[]>;
     plumbers: string[] = [];
     allPlumber: plumberModel[];
     @ViewChild('plumberInput') plumberInput: ElementRef<HTMLInputElement>;

  constructor(
    public afs: AngularFirestore,
    private customerService: CustomerService
  ) { 
    this.filteredPlumbers = this.plumberCtrl.valueChanges.pipe(
      startWith(null),
      map((plumber: string | null)=>(plumber ? this._filter(plumber): this.allPlumber.slice()))
    )

  }

add(event: MatChipInputEvent): void {
    const value = (event.value || '').trim();

    if(value) {
      this.plumbers.push(value);
    }

    event.chipInput!.clear();
    this.plumberCtrl.setValue(null);

  }

  remove(plumber:string) {
    const index = this.plumbers.indexOf(plumber);

    if(index >= 0) {
      this.plumbers.slice(index,1);
    }
  }

  selected(event: MatAutocompleteSelectedEvent): void {
    this.plumbers.push(event.option.viewValue);
    this.plumberInput.nativeElement.value = '';
    this.plumberCtrl.setValue(null);
    
  }

ngOnInit(): void {

    this.customerService.getPlumbers().subscribe(plubObs => {
      this.allPlumber = plubObs;
    })
    
  }

}