Revert trend-indicator.component.html

libs/ui/src/lib/trend-indicator/trend-indicator.component.html

@@ -1,5 +1,5 @@
-@if (isLoading) {
 <ngx-skeleton-loader
+  *ngIf="isLoading; else other"
   animation="pulse"
   appearance="circle"
   [theme]="{
@@ -7,36 +7,44 @@
     width: '1.8rem'
   }"
 />
-} @else {
-  @if (marketState === 'closed' && range === '1d') {
-    <ion-icon class="text-muted" name="pause-circle-outline" [size]="size" />
-  } @else {
-    @if (marketState === 'delayed' && range === '1d') {
-      <ion-icon class="text-muted" name="time-outline" [size]="size" />
-    } @else {
+
+<ng-template #other>
+  <ion-icon
+    *ngIf="marketState === 'closed' && range === '1d'; else delayed"
+    class="text-muted"
+    name="pause-circle-outline"
+    [size]="size"
+  />
+  <ng-template #delayed>
+    <ion-icon
+      *ngIf="marketState === 'delayed' && range === '1d'; else trend"
+      class="text-muted"
+      name="time-outline"
+      [size]="size"
+    />
+  </ng-template>
+  <ng-template #trend>
     <ng-container>
-        @if (value <= -0.0005) {
       <ion-icon
+        *ngIf="value <= -0.0005"
         class="text-danger"
         name="arrow-down-circle-outline"
         [ngClass]="{ 'rotate-45-down': value > -0.01 }"
         [size]="size"
       />
-        } @else if (value > -0.0005 && value < 0.0005) {
       <ion-icon
+        *ngIf="value > -0.0005 && value < 0.0005"
         class="text-muted"
         name="arrow-forward-circle-outline"
         [size]="size"
       />
-        } @else {
       <ion-icon
+        *ngIf="value >= 0.0005"
         class="text-success"
         name="arrow-up-circle-outline"
         [ngClass]="{ 'rotate-45-up': value < 0.01 }"
         [size]="size"
       />
-        }
     </ng-container>
-    }
-  }
-}
+  </ng-template>
+</ng-template>