I am seeking alternative methods for implementing Update data in Firestore within a component's typescript file.

Typically, I would utilize a service and subscribe to it, but due to performance issues caused by loading around 20,000 records during a data migration process, our app has been crashing.

In the usual way, I would do the following:

Via Service:


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

@Injectable({
  providedIn: 'root'
})

export class CustomerService {
  customerCollection: AngularFirestoreCollection <Customer>;
  customerDoc: AngularFirestoreDocument <Customer>;
  customers: Observable<Customer[]>;

   constructor(
    public angularFireStore: AngularFirestore

  ) 
  {}

    getCustomer() {
    this.customerCollection = this.angularFireStore.collection('customer');
    this.customers = this.customerCollection.snapshotChanges().pipe(map(changes => {
      return changes.map( a => {
        const data = a.payload.doc.data() as Customer;
        data.id=a.payload.doc.id;
        return data;
      })

    }))
    return this.customers;
  }

  addCustomer(customerAdd:Customer) {
    this.customerCollection.add(customerAdd);
  };

  updateCustomer(custcol : Customer) {
    this.customerDoc = this.angularFireStore.doc(`customer/${custcol.id}`);
    this.customerDoc.update(custcol);
  }


}

Traditionally, in my Component TS Old Code, I would simply include the update logic in a function like this.

 customerList: customerModel[];
 customerDetails : customerModel;
 customerName: any;
 
 addCustomer : Customer ={
    customerNo: '',
    customerAccountNo: '',
    customerName: '',
    customerAddress: '',
    customerContactNo: '',
    customerEmail: ''

  };

ngOnInit(): void {
 this.customerService.getCustomer().subscribe( customerObservable => {
 this.customerList = customerObservable});
}


add() {
 this.addCustomer.customerName = this.customerName //(input comes from ngModel btw)
 this.customerCollection.add(this.addCustomer);
}

update(){
 this.customerDetails.customerName = this.customerName //(input comes from ngModel btw)
 this.customerService.UpdateCustomer(this.customerDetails)
}

This setup was efficient with only 6000+ records, but after adding more data, it became sluggish. In search of solutions, we have moved away from using the service and integrated everything into the component instead. Although I successfully implemented the Query (using ValueChanges), and Adding, I am struggling to find proper documentation or syntax for the Update operation, even on the official AngularFireStore Documentation.

Here is my updated Component TS Code

import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from '@angular/fire/compat/firestore';
import { Observable} from 'rxjs'; 
import { Customer } from '../../models/customer.model';


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

 private customerCollection: AngularFirestoreCollection<Customer>
 private customerDocs: AngularFirestoreDocument<Customer>
 customers: Observable<Customer[]>
  
 constructor(
    public afs: AngularFirestore
  ) { 
    this.customerCollection = this.afs.collection<Customer>('customer')
    this.customers = this.customerCollection.valueChanges();
  }
 customerList: Customer[];
 customerDetails: Customer;

 addCustomer : Customer ={
    customerNo: '',
    customerAccountNo: '',
    customerName: '',
    customerAddress: '',
    customerContactNo: '',
    customerEmail: ''
 
  };

queryCustomer() {
    
    this.customerCollection = this.afs.collection('customer',
    ref => ref
    .orderBy('customerName')
    .startAt(this.query)
    .endAt(this.query + "\uf8ff"));
    this.customers = this.customerCollection.valueChanges();
    this.customers.subscribe(
     (data) => (this.customerList = (data)));
  }

add() {
  this.addCustomer.customerName = this.customerName;
  this.customerCollection.add(this.addCustomer);
}

queryCustomer() {
    
    this.customerCollection = this.afs.collection('customer',
    ref => ref
    .orderBy('customerName')
    .startAt(this.query)
    .endAt(this.query + "\uf8ff"));
    this.customers = this.customerCollection.snapshotChanges().pipe(map(changes =>{
        return changes.map(a =>{
        const data=a.payload.doc.data() as depositModel;
        data.id=a.payload.doc.id;
        return data;
       });
      }
    ));
    this.customers.subscribe(
     (data) => (this.customerList = (data)));
  }


}

I have made several attempts at updating the records, but none seem to work correctly.

update() {
 
  this.customerDocs = this.angularFirestore.doc(`jobOrders/${customerDetails.id}`);
  this.customerDocs.Update(customerDetails);

}

I am relatively new to this type of implementation and would greatly appreciate any assistance. Thank you.