RTL/src/app/clightning/home/home.component.html

<div fxLayout="column" fxLayout.gt-sm="row wrap">
  <div fxFlex="25" class="padding-gap">
    <div fxLayout="column">
      <mat-card fxFlex="100" [ngClass]="{'custom-card error-border': flgLoading[1]==='error','custom-card': true}">
        <mat-card-header class="bg-primary" fxLayoutAlign="center center">
          <mat-card-title class="m-0 pt-2">
            <h5>Fee Report</h5>
          </mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <div fxLayout="column" class="pl-4">
            <mat-list fxFlex="100" fxLayoutAlign="start start">
              <mat-list-item fxFlex="65" fxLayoutAlign="start start">Daily ({{information?.smaller_currency_unit}})</mat-list-item>
              <mat-list-item fxFlex="25" fxLayoutAlign="end start">{{fees?.day_fee_sum}}</mat-list-item>
              <mat-divider></mat-divider>
            </mat-list>
            <mat-list fxFlex="100" fxLayoutAlign="start start">
              <mat-list-item fxFlex="65" fxLayoutAlign="start start">Weekly ({{information?.smaller_currency_unit}})</mat-list-item>
              <mat-list-item fxFlex="25" fxLayoutAlign="end start">{{fees?.week_fee_sum}}</mat-list-item>
              <mat-divider></mat-divider>
            </mat-list>
            <mat-list fxFlex="100" fxLayoutAlign="start start">
              <mat-list-item fxFlex="65" fxLayoutAlign="start start">Monthly ({{information?.smaller_currency_unit}})</mat-list-item>
              <mat-list-item fxFlex="25" fxLayoutAlign="end start">{{fees?.month_fee_sum}}</mat-list-item>
              <mat-divider></mat-divider>
            </mat-list>
          </div>
          <mat-progress-bar *ngIf="flgLoading[1]===true" mode="indeterminate"></mat-progress-bar>
          <mat-divider></mat-divider>  
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>
<ng-template #withoutData><h3>Sats</h3></ng-template>