Ionic/Angular/Firestore: Strategy for field refresh without page refresh

Issue

TL;DR Using AngularFirestore with Ionic/Angular. I want to synchronize data between user devices (e.g. check boxes on a form) WITHOUT causing a full page refresh for all users.

I am a happy user of Ionic/Angular for an app I use to facilitate work in a coffee shop I manage. I have an existing checklist capability in the app as it stands.

The app is implemented using FireStore as the back end and I'm using the AngularFirestore APIs.

I have several tablets running the app in the Cafe and as people complete the tasks, they can check them off. So far, so good.

Now what the staff is asking is that I synchronize the checklists so that if someone marks an item as complete on one tablet, all of the tablets get the update. The obvious solution is to simply use 2-way binding and the AngularFirestore APIs. When one user checks a box, and then tablet is always in sync because the app is subscribed to valueChanges().

But there is a problem. When the Firestore is updated by one user, all of the other users experience a page refresh. In their workflow, they have to re-scroll to wherever in the checklist they were working before one of their co-workers updated the FireStore database. It's anoying.

I suspect there is a basic AngularFirestore or Ionic/Angular idea that I'm missing. I want to update fields on a page without refreshing the whole page.

Here is a typical implmentation:

module.ts

this.notesCollection = this.afs.collection('notes', (ref) =>
  ref.orderBy('deleted').orderBy('notes').where('deleted', '!=', 'true')
);

this.notesInfo = this.notesCollection.snapshotChanges();

this.notesInfo.subscribe((notes) => {
  this.notesElements = notes.map((note) => ({
    id: note.payload.doc.id,
    ...note.payload.doc.data(),
    expanded: false,
  }));
});

html

  <ion-list>
    <div *ngFor="let note of notesElements">
      <div *ngIf="!note.deleted">
        <ion-item>
      <ion-grid>
        <ion-row width="100%">
          <ion-col size="11">{{note.notes}}</ion-col>
          <ion-col size="1">
            <ion-buttons>
              <ion-button
                slot="end"
                (click)="expandItem($event, false, note)"
                ><div>Edit</div>
              </ion-button>
            </ion-buttons>
          </ion-col>
        </ion-row>

...

Solution

I solved this problem using a FormArray. Here's what I did:

1. Define a firestore collection, Subscribe to the snapShotChanges() service.

2. In ngOnInit, write contents to the FormArray.

3. Each time the service fired, I checked to see which element changed and then I only updated the required element of the FormArray using .patchValue({tag: value})

Answered By - plm