iTunes/dashboard/src/app/to-sort/to-sort.component.html

<div class="container">
  <h1>To sort Songs - </h1>

<br />
<div class="row cardAdmin">
  <div class="col-lg-3 col-md-3">
      <div class="panel panel-blue">
          <div class="panel-heading">
              <div class="row">
                  <div class="col-xs-3">
                      <span class="glyphicon glyphicon-time stats_icon"></span>
                  </div>
                  <div class="col-xs-9 text-right">
                      <div>
                          <h3 *ngIf="!totalTime"><span class="glyphicon glyphicon-refresh loading"></span></h3>
                          <h3 *ngIf="totalTime">{{totalTime | convertMs}}</h3>
                      </div>
                      <div><br>Total time ({{totalTime | convertMoreExact}})</div>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <div class="col-lg-3 col-md-3">
      <div class="panel panel-green">
          <div class="panel-heading">
              <div class="row">
                  <div class="col-xs-3">
                      <span class="glyphicon glyphicon-hdd stats_icon"></span>
                  </div>
                  <div class="col-xs-9 text-right">
                      <div>
                          <h3 *ngIf="!totalSize"><span class="glyphicon glyphicon-refresh loading"></span></h3>
                          <h3 *ngIf="totalSize">{{totalSize | convertSizeToString}}</h3>
                      </div>
                      <div><br>Total size</div>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <div class="col-lg-3 col-md-3">
      <div class="panel panel-yellow">
          <div class="panel-heading">
              <div class="row">
                  <div class="col-xs-3">
                      <span class="glyphicon glyphicon-play stats_icon"></span>
                  </div>
                  <div class="col-xs-9 text-right">
                      <div>
                          <h3 *ngIf="!trackCountSong"><span class="glyphicon glyphicon-refresh loading"></span></h3>
                          <h3 *ngIf="trackCountSong">{{trackCountSong}}</h3>
                      </div>
                      <div><br>Total Songs</div>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <div class="col-lg-3 col-md-3">
      <div class="panel panel-red">
          <div class="panel-heading">
              <div class="row">
                  <div class="col-xs-3">
                      <span class="glyphicon glyphicon-stop stats_icon"></span>
                  </div>
                  <div class="col-xs-9 text-right">
                      <div>
                          <h3 *ngIf="!neverListenSong"><span class="glyphicon glyphicon-refresh loading"></span></h3>
                          <h3 *ngIf="neverListenSong">{{neverListenSong}}</h3>
                      </div>
                      <div><br>Never list. songs (~{{neverListenSong / trackCountSong * 100 | round}}%)</div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

<div class="col-md-12">
  <table class="table table-striped" style="white-space: nowrap;">
    <thead>
        <tr>
            <th>Album</th>
            <th>Track Count</th>
            <th>Artist/Album Artist</th>
            <th>Play Count</th>
            <th>Rating</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let album of toSortAlbum">
            <td>
              <a [routerLink]="['/album', album.key]">{{album.key}}</a>&nbsp;
            </td>

            <td>{{albums[album.key]['Track Count']}}</td>

            <ng-template [ngIf]="albums[album.key]['Album Artist']" [ngIfElse]="artistSection">
              <td>
                  <a [routerLink]="['/artist', albums[album.key]['Album Artist']]">{{albums[album.key]['Album Artist']}}</a>&nbsp;
              </td>
            </ng-template>

            <ng-template #artistSection>
              <td>
                  <a [routerLink]="['/artist', albums[album.key].Artist[0]]">{{albums[album.key].Artist}}</a>&nbsp;
              </td>
            </ng-template>

            <ng-template #artistSection>
              <td>
                  <a [routerLink]="['/artist', albums[album.key].Artist[0]]">{{albums[album.key].Artist}}</a>&nbsp;
              </td>
            </ng-template>

            <td>
              {{albums[album.key]['Play Count']}} ({{albums[album.key]['Play Count']/albums[album.key]['Track Count'] | number:'1.0-0'}}/songs)
            </td>

            <td class="star" [title]="(albums[album.key]['Album Rating Computed']?'Computed Rating: ':'Rating: ') + albums[album.key]['Album Rating']">
            <span *ngFor="let item of numberToArray(albums[album.key]['Album Rating'], 20)">
              <span class="glyphicon" [ngClass]="albums[album.key]['Album Rating Computed']?'glyphicon-star-empty':'glyphicon-star'"></span>
            </span>
            </td>
        </tr>
    </tbody>
  </table>
</div>
</div>