irrigation-management/src/app/irrigation/irrigation-info.component.html

<div class="p-2" *ngIf="dataLoaded; else loading">
  <h1>{{currentReservoirData.volume | number:'1.0-0'}}&emsp;m3</h1>
  <p class="text-secondary">volume of water in the reservoir</p>
  <h2>{{currentReservoirData.elevation | number:'1.3-3'}}&nbsp;m MSL</h2>
  <p class="text-secondary">water-level</p>
  <h2>{{currentReservoirData.area | number:'1.2-2'}}&nbsp;m2</h2>
  <p class="text-secondary">water surface</p>
  <strong>{{currentReservoirData.timestamp | date:'medium'}}</strong>
  <p class="text-secondary">latest data</p>
</div>
<ng-template class="p-2" #loading>
  Loading...
</ng-template>