<div *ngIf="!!distance;else elseBlock"
  class="container"
  matTooltip="Direction and distance to the nearest point of interest.
    The direction depends on your device to identify the North and its calibration.
    A green arrow indicates that the device reports the North, and hence the direction should be accurate.
    Otherwise, a calibration of the sensors might be needed."
  >
  <mat-icon aria-hidden="false"
    [class]="orientationClass"
    [ngStyle]="{'transform':'rotate(' + (featureFinderService.direction$ | async) + 'deg)'}">
    {{ orientationClass == 'unknown' ? 'cached' : 'north' }}
  </mat-icon>
  <div class="distance">
    {{ distance }} m
  </div>
</div>
<ng-template #elseBlock>
  <div class="nothing">
    Nothing around
  </div>
</ng-template>