How to toggle a status with Angular and Firestore

Canoeing in canal Stockholm Sweden
Canoeing in canal Stockholm Sweden

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.

1 comments On How to toggle a status with Angular and Firestore

  • The information provided in this article about the toggle function will be very much helpful in knowing about the toggle function well. Thank you for sharing it with us. Keep sharing more such articles with us in future.

Leave a Reply to Carlos Herrera Cancel Reply

Your email address will not be published.