RTL/src/app/lnd/peers-channels/connections.component.html

<div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
  <fa-icon class="page-title-img mr-1" [icon]="faChartPie"></fa-icon>
  <span class="page-title">On-chain Balance</span>
</div>
<div fxLayout="column" class="padding-gap-x mb-4">
  <mat-card>
    <mat-card-content fxLayout="column">
      <rtl-currency-unit-converter [values]="balances"></rtl-currency-unit-converter>
    </mat-card-content>
  </mat-card>
</div>
<div fxLayout="row" fxLayoutAlign="start center" class="page-title-container">
  <fa-icon class="page-title-img mr-1" [icon]="faUsers"></fa-icon>
  <span class="page-title">Connections</span>
</div>
<div fxLayout="column" class="padding-gap-x">
  <mat-card>
    <mat-card-content fxLayout="column">
      <mat-tab-group [(selectedIndex)]="activeLink" (selectedTabChange)="onSelectedTabChange($event)">
        <mat-tab>
          <ng-template mat-tab-label>
            <span matBadgeOverlap="false" class="tab-badge" matBadge="{{activeChannels}}">Channels</span>
          </ng-template>
        </mat-tab>
        <mat-tab>
          <ng-template mat-tab-label>
            <span matBadgeOverlap="false" class="tab-badge" matBadge="{{activePeers}}">Peers</span>
          </ng-template>
        </mat-tab>
      </mat-tab-group>
      <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap-x-large">
        <router-outlet></router-outlet>
      </div>
    </mat-card-content>
  </mat-card>
</div>