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">
+        @if (element?.performances?.allTimeHigh?.date) {
           <gf-value
             [isDate]="true"
             [locale]="locale"
             [value]="element?.performances?.allTimeHigh?.date"
           />
+        }
       </div>
     </td>
   </ng-container>
@@ -83,6 +85,7 @@
       <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>
+      @if (isNumber(element?.performances?.allTimeHigh?.performancePercent)) {
         <gf-value
           class="d-inline-block justify-content-end"
           [isPercent]="true"
@@ -95,6 +98,7 @@
           }"
           [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;