FoodLoop-Web/src/app/snippets/cust-snippet-bar.component.html

<div class="card">
  <div class="card-footer">
    <ul>
      <li class="hidden-sm-down">
        <div class="text-muted">My Points</div>
        <strong>{{ userSum / 10 | number:'1.0-0' }}</strong>
      </li>
      <li class="hidden-sm-down">
        <div class="text-muted">My Rank</div>
        <div *ngIf="userPosition == 0" class="statuscontent">
          <strong>Unranked</strong>
        </div>
        <div *ngIf="userPosition != 0" class="statuscontent">
          <strong>{{ userPosition }}</strong>
        </div>
      </li>
      <li class="hidden-sm-down">
        <div class="text-muted">My Total Spend</div>
        <strong>{{ userSum | currency:'GBP':'symbol':'1.2-2' }}</strong>
      </li>
      <li class="hidden-sm-down">
        <div class="text-muted">Value to Local Economy</div>
        <strong>{{ userSum * 2.3 | currency:'GBP':'symbol':'1.2-2' }}</strong>
      </li>
    </ul>
  </div>
</div>