How ng-style Helped Me

// async is not necessary here, but using it to control event loop
async addItem() {
const id = this.afs.createId();
const groceryItem: GroceryItem = {
value: this.createForm.controls.item.value,
lineThrough: false,
id: id
};
const createCall = await this.groceryItemsCollection.doc(id).set(groceryItem)
.catch(() => new Error('Error when creating item'));

if ( createCall instanceof Error) {
return alert(createCall);
}

this.createForm.controls.item.setValue('');
}
<mat-checkbox (click)="linethrough(groceryItem)" [checked]="groceryItem.lineThrough"></mat-checkbox>
async linethrough(groceryItem: GroceryItem) {
if (groceryItem.lineThrough) {
groceryItem.lineThrough = false;
} else {
groceryItem.lineThrough = true;
}
const updateCall = await this.groceryItemsCollection.doc(groceryItem.id).set(groceryItem)
.catch(() => new Error('Error when creating item'));

if ( updateCall instanceof Error) {
return alert(updateCall);
}
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store