RTL/src/app/lnd/on-chain/utxo-tables/utxo-tables.component.html

<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="bordered-box">
  <mat-tab-group [selectedIndex]="selectedTableIndex" (selectedIndexChange)="onSelectedIndexChanged($event)">
    <mat-tab>
      <ng-template mat-tab-label>
        <span matBadge="{{numUtxos}}" matBadgeOverlap="false" class="tab-badge">UTXOs</span>
      </ng-template>
      <rtl-on-chain-utxos [isDustUTXO]="false" fxLayout="row" fxFlex="100"></rtl-on-chain-utxos>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
        <span matBadge="{{numTransactions}}" matBadgeOverlap="false" class="tab-badge">Transactions</span>
      </ng-template>
      <rtl-on-chain-transaction-history fxLayout="row" fxFlex="100"></rtl-on-chain-transaction-history>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
        <span matBadge="{{numDustUtxos}}" matBadgeOverlap="false" class="tab-badge">Dust UTXOs</span>
      </ng-template>
      <rtl-on-chain-utxos [isDustUTXO]="true" fxLayout="row" fxFlex="100"></rtl-on-chain-utxos>
    </mat-tab>
  </mat-tab-group>
</div>