How to toggle a status with Angular and Firestore

This short how-to will explain how I implemented a toggle function with Angular and Firestore, I had this user requirement to create a button and then by clicking the button the color of the button and the status in Firestore would change on this field.

I will show you a picture of what I’m talking about. In the image I have 3 buttons per row, the last 2 buttons are for the CRUD functionality the status column is for the status that I toggle by clicking the button.

I’m using the Angular and Firestore database, and also AngularFire. I am not going to describe how to install and configure each of these requirements. If you would face problems setting up these, don’t hesitate to ping me by leaving a comment below.

Lets look at my .html file in which i’m using the *ngIf to validate the status. I also call a function when the button is clicked updateLinksstatus(linksdata)

          <td class="text-center">
            <span *ngIf="linksdata.searchlinksdata.status">
              <button class="btn btn-sm btn-success" type="button" (click)="updateLinksstatus(linksdata)">
                <em class="fa fa-pencil-square-o"></em>
              </button>
            </span>
            <span *ngIf='!linksdata.searchlinksdata.status'>
              <button class="btn btn-sm btn-danger" type="button" (click)="updateLinksstatus(linksdata)">
                <em class="fa fa-pencil-square-o"></em>
              </button>
            </span>
          </td>

Let’s have a look at my component.ts file to see how to interact with Firstore when the button is clicked. I use the .update function to update the status in Firestore.

  updateLinksstatus(linksdata) {
    if(linksdata.searchlinksdata.status)
      linksdata.searchlinksdata.status = false;
    else
      linksdata.searchlinksdata.status = true;
    this.db.doc(`${QueryLinksConfig.collection_endpoint}/${linksdata.id}`).update({status: linksdata.searchlinksdata.status})
    .then(res=>{
      this.toasterService.success('Link status change', 'Success!');
    });
}

That is it

I hope this helps if you have questions when you look at the code snippet and if it’s not clear please get in contact by filling in the comment below and I will help you.