I want to update a CSS class when new data is received from Firestore. I attempted the following code:
this.afs.collection('orders').doc(this.data.id).valueChanges().subscribe(dataset => {
console.log(dataset.state);
this.state = dataset.state;
this.takeAway = dataset.takeaway;
});
Here is the corresponding HTML:
<div class="progress dark">
<div class="right">
<div [ngClass]="{'current': this.state === 'submitted'}">Submitted</div>
<div [ngClass]="{'current': this.state === 'cooking'}">Cooking</div>
<div *ngIf="!takeAway" [ngClass]="{'current': this.state === 'delivery'}">Delivery</div>
<div *ngIf="takeAway" [ngClass]="{'current': this.state === 'ready'}">Ready for Pickup</div>
<div class="done" [ngClass]="{'current': this.state === 'done'}">Order Received</div>
</div>
The issue occurs when I first load my component, everything works fine. However, when the data has changed, nothing happens. I am definitely receiving the updated data, so the problem lies in how to bind the dynamic classes.