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.
Leave a Reply