Bisq dashboard: Change color between red/green when price changes

frontend/src/app/shared/directives/colored-price.directive.ts

@@ -0,0 +1,22 @@
+import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
+
+@Directive({
+  selector: '[appColoredPrice]',
+})
+export class ColoredPriceDirective implements OnChanges {
+  @Input() appColoredPrice: number;
+  previousValue = null;
+
+  constructor(
+    private element: ElementRef
+  ) { }
+
+  ngOnChanges() {
+    if (this.previousValue && this.appColoredPrice < this.previousValue) {
+      this.element.nativeElement.classList.add('red-color');
+    } else {
+      this.element.nativeElement.classList.remove('red-color');
+    }
+    this.previousValue = this.appColoredPrice;
+  }
+}

frontend/src/app/shared/shared.module.ts

@@ -19,6 +19,7 @@ import { TxFeaturesComponent } from '../components/tx-features/tx-features.compo
 import { TxFeeRatingComponent } from '../components/tx-fee-rating/tx-fee-rating.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { LanguageSelectorComponent } from '../components/language-selector/language-selector.component';
+import { ColoredPriceDirective } from './directives/colored-price.directive';
 
 @NgModule({
   declarations: [
@@ -39,6 +40,7 @@ import { LanguageSelectorComponent } from '../components/language-selector/langu
     CeilPipe,
     ShortenStringPipe,
     Decimal2HexPipe,
+    ColoredPriceDirective,
   ],
   imports: [
     CommonModule,
@@ -77,6 +79,7 @@ import { LanguageSelectorComponent } from '../components/language-selector/langu
     CeilPipe,
     ShortenStringPipe,
     Decimal2HexPipe,
+    ColoredPriceDirective,
   ]
 })
 export class SharedModule {}