angular change css class on firestore event

Question

i would like to change a css class when data updates from firestore received. To do so i tried the following:

this.afs.collection('orders').doc(this.data.id).valueChanges().subscribe(dataset => {
  console.log(dataset.state);
  this.state = dataset.state;
  this.takeAway = dataset.takeaway;
});

and here is my html:

  <div class="progress dark">
<div class="right">
  <div [ngClass]="{'current': this.state === 'submitted'}">Übermittelt</div>
  <div [ngClass]="{'current': this.state === 'cooking'}">In Zubereitung</div>
  <div *ngIf="!takeAway" [ngClass]="{'current': this.state === 'delivery'}">In Zustellung</div>
  <div  *ngIf="takeAway" [ngClass]="{'current': this.state === 'ready'}">Bereit zur Abholung</div>
  <div class="done" [ngClass]="{'current': this.state === 'done'}">Gericht erhalten</div>
</div>

the problem is if i call my component the first time, everything is working but if data has changed, nothing is going to happen. I defineteley receive the data so the error is how to bind the dynamic class

Answer 1

After long research i was able to solve the issue. Ionic missed to add one required dependency to my Podfile. Here is the final podfile with all required dependencies and imports:

platform :ios, '11.0'
use_frameworks!
install! 'cocoapods', :disable_input_output_paths => true

def capacitor_pods
  # Automatic Capacitor Pod dependencies, do not delete
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
   pod 'CordovaPlugins', :path => '../capacitor-cordova-ios-plugins'
   pod 'CordovaPluginsResources', :path => '../capacitor-cordova-ios-plugins'
  # Do not delete
 end

 target 'App' do
 capacitor_pods
 # Add your Pods here

  end