diff --git a/frontend/src/app/components/blocks-list/blocks-list.component.html b/frontend/src/app/components/blocks-list/blocks-list.component.html
index d5c8c2ef9..c7c16d1f2 100644
--- a/frontend/src/app/components/blocks-list/blocks-list.component.html
+++ b/frontend/src/app/components/blocks-list/blocks-list.component.html
@@ -8,14 +8,14 @@
   <div style="min-height: 295px">
     <table class="table table-borderless">
       <thead>
-        <th class="height text-left" [class]="widget ? 'widget' : ''" [class]="indexingAvailable ? '' : 'legacy'" i18n="latest-blocks.height">Height</th>
-        <th *ngIf="indexingAvailable" class="pool text-left" [class]="widget ? 'widget' : ''" [class]="indexingAvailable ? '' : 'legacy'" i18n="mining.pool-name">Pool</th>
+        <th class="height text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}" i18n="latest-blocks.height">Height</th>
+        <th *ngIf="indexingAvailable" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}" i18n="mining.pool-name">Pool</th>
         <th class="timestamp" i18n="latest-blocks.timestamp" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Timestamp</th>
         <th class="mined" i18n="latest-blocks.mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Mined</th>
-        <th *ngIf="indexingAvailable" class="reward text-right" i18n="latest-blocks.reward" [class]="widget ? 'widget' : ''" [class]="indexingAvailable ? '' : 'legacy'">Reward</th>
+        <th *ngIf="indexingAvailable" class="reward text-right" i18n="latest-blocks.reward" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">Reward</th>
         <th *ngIf="indexingAvailable && !widget" class="fees text-right" i18n="latest-blocks.fees" [class]="indexingAvailable ? '' : 'legacy'">Fees</th>
-        <th *ngIf="indexingAvailable" class="txs text-right" i18n="dashboard.txs" [class]="widget ? 'widget' : ''" [class]="indexingAvailable ? '' : 'legacy'">TXs</th>
-        <th *ngIf="!indexingAvailable" class="txs text-right" i18n="dashboard.txs" [class]="widget ? 'widget' : ''" [class]="indexingAvailable ? '' : 'legacy'">Transactions</th>
+        <th *ngIf="indexingAvailable" class="txs text-right" i18n="dashboard.txs" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">TXs</th>
+        <th *ngIf="!indexingAvailable" class="txs text-right" i18n="dashboard.txs" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">Transactions</th>
         <th class="size" i18n="latest-blocks.size" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Size</th>
       </thead>
       <tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
@@ -24,7 +24,7 @@
             <a [routerLink]="['/block' | relativeUrl, block.height]">{{ block.height
               }}</a>
           </td>
-          <td  *ngIf="indexingAvailable" class="pool text-left" [class]="widget ? 'widget' : ''" [class]="indexingAvailable ? '' : 'legacy'">
+          <td  *ngIf="indexingAvailable" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
             <div class="tooltip-custom">
               <a class="clear-link" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]">
                 <img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
@@ -40,13 +40,13 @@
           <td class="mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
             <app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
           </td>
-          <td *ngIf="indexingAvailable" class="reward text-right" [class]="widget ? 'widget' : ''" [class]="indexingAvailable ? '' : 'legacy'">
+          <td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
             <app-amount [satoshis]="block.extras.reward" [noFiat]="true" digitsInfo="1.2-2"></app-amount>
           </td>
           <td *ngIf="indexingAvailable && !widget" class="fees text-right" [class]="indexingAvailable ? '' : 'legacy'">
             <app-amount [satoshis]="block.extras.totalFees" [noFiat]="true" digitsInfo="1.2-2"></app-amount>
           </td>
-          <td class="txs text-right" [class]="widget ? 'widget' : ''" [class]="indexingAvailable ? '' : 'legacy'">
+          <td class="txs text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
             {{ block.tx_count | number }}
           </td>
           <td class="size" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">