Wrap value components in condition

libs/ui/src/lib/benchmark/benchmark.component.html

@@ -66,11 +66,13 @@
     </th>
     <td *matCellDef="let element" class="d-none d-lg-table-cell px-2" mat-cell>
       <div class="d-flex justify-content-end">
-        <gf-value
+        @if (element?.performances?.allTimeHigh?.date) {
-          [isDate]="true"
+          <gf-value
-          [locale]="locale"
+            [isDate]="true"
-          [value]="element?.performances?.allTimeHigh?.date"
+            [locale]="locale"
-        />
+            [value]="element?.performances?.allTimeHigh?.date"
+          />
+        }
       </div>
     </td>
   </ng-container>
@@ -83,18 +85,20 @@
       <span class="d-block d-sm-none text-nowrap" i18n>from ATH</span>
     </th>
     <td *matCellDef="let element" class="px-2 text-right" mat-cell>
-      <gf-value
+      @if (isNumber(element?.performances?.allTimeHigh?.performancePercent)) {
-        class="d-inline-block justify-content-end"
+        <gf-value
-        [isPercent]="true"
+          class="d-inline-block justify-content-end"
-        [locale]="locale"
+          [isPercent]="true"
-        [ngClass]="{
+          [locale]="locale"
-          'text-danger':
+          [ngClass]="{
-            element?.performances?.allTimeHigh?.performancePercent < 0,
+            'text-danger':
-          'text-success':
+              element?.performances?.allTimeHigh?.performancePercent < 0,
-            element?.performances?.allTimeHigh?.performancePercent === 0
+            'text-success':
-        }"
+              element?.performances?.allTimeHigh?.performancePercent === 0
-        [value]="element?.performances?.allTimeHigh?.performancePercent"
+          }"
-      />
+          [value]="element?.performances?.allTimeHigh?.performancePercent"
+        />
+      }
     </td>
   </ng-container>
 

libs/ui/src/lib/benchmark/benchmark.component.ts

@@ -20,6 +20,7 @@ import {
 import { MatDialog } from '@angular/material/dialog';
 import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { isNumber } from 'lodash';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject, takeUntil } from 'rxjs';
 
@@ -49,6 +50,7 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy {
 
   public displayedColumns = ['name', 'date', 'change', 'marketCondition'];
   public isLoading = true;
+  public isNumber = isNumber;
   public resolveMarketCondition = resolveMarketCondition;
   public translate = translate;