tile.component.html

<div class="row no-gutters mx-1 py-2 border-bottom">
  <div class="col-1">
    <button class="btn btn-link p-0" *ngIf="!detailsExposed" (click)="showDetails()">{{ tile.id }}</button>
    <button class="btn btn-link p-0" *ngIf="detailsExposed" (click)="hideDetails()">{{ tile.id }}</button>
  </div>
  <div class="col">
    <button class="btn btn-link p-0" *ngIf="!detailsExposed" (click)="showDetails()">{{ tile.name }}</button>
    <button class="btn btn-link p-0" *ngIf="detailsExposed" (click)="hideDetails()">{{ tile.name }}</button>
  </div>
  <div class="col">
    {{ tile.raMin }} <span class="badge badge-light border">MIN</span>
    {{ tile.raMax }} <span class="badge badge-light border">MAX</span>
  </div>
  <div class="col">
    {{ tile.decMin }} <span class="badge badge-light border">MIN</span>
    {{ tile.decMax }} <span class="badge badge-light border">MAX</span>
  </div>
  <div class="col-1">{{ tile.custom1 }}</div>
  <div class="col-1">{{ tile.custom2 }}</div>
  <div class="col-2">
    <div class="progress">
      <div class="progress-bar"
           [ngClass]="{'bg-success': percentComplete == '100%'}"
           [ngStyle]="{'width': percentComplete}">
        {{percentComplete}}
      </div>
    </div>
  </div>
</div>

<div class="p-3 mx-1 border rounded-bottom bg-white" *ngIf="detailsExposed" @vslider>
  <ng-container *ngIf="tileDescription | async; else loading">

    <a [routerLink]="['/fileeditor','tile',tile.id,'json','definitions']" class="btn btn-sm btn-info">Edit
      Configuration</a>

    <h5 class="mt-2">Course Center Frequencies (MHz)</h5>
    <div class="alert alert-light p-1">
      <span *ngFor="let ccf of (tileDescription | async).coarseCenterFrequenciesMHz; last as isLast ">{{ ccf }}<span
        *ngIf="!isLast">, </span></span>
    </div>

    <h5 class="mt-2">Phase Centers (deg)</h5>
    <div class="alert alert-light p-1">
      <div class="form-row">
        <ng-container *ngFor="let pcd of (tileDescription | async).phaseCentersDeg">
          <div class="col-2"><b>RA: </b> {{ pcd.ra }}</div>
          <div class="col-2"><b>Dec: </b> {{ pcd.dec }}</div>
        </ng-container>
      </div>
    </div>
  </ng-container>

  <ng-template #loading>
    <app-loading></app-loading>
  </ng-template>

</div>