iTunes/dashboard/src/app/artist/artist.component.html

<div class="container">
  <h1>{{artistName}}</h1>

  <div class="alert alert-warning">
      <h3>Debug Zone</h3>
      Returned song: {{songs.length}}<br />
      Theorical song: {{ artist ? artist['Track Count'] : ""  }}
      <span *ngIf="artist && (songs.length == artist['Track Count'])" class="glyphicon glyphicon-ok" style="color:green"></span>
      <span *ngIf="artist && (songs.length != artist['Track Count'])" class="glyphicon glyphicon-remove" style="color:red"></span>
  </div>

  <div class="row cardAdmin">
      <div class="col-lg-3 col-md-3 col-sm-6">
          <div class="panel panel-yellow">
              <div class="panel-heading">
                  <div class="row">
                      <div class="col-xs-3">
                          <span class="glyphicon glyphicon-star stats_icon"></span>
                      </div>
                      <div class="col-xs-9 text-right">
                          <div>
                              <h3 *ngIf="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
                              <h3 *ngIf="artist">{{artist.Rating}}/100</h3>
                          </div>
                          <div>Rating</div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6">
          <div class="panel panel-blue">
              <div class="panel-heading">
                  <div class="row">
                      <div class="col-xs-3">
                          <span class="glyphicon glyphicon-cd stats_icon"></span>
                      </div>
                      <div class="col-xs-9 text-right">
                          <div>
                              <h3 *ngIf="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
                              <h3 *ngIf="artist">{{artist.Album?.length}}</h3>
                          </div>
                          <div>Albums</div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6">
          <div class="panel panel-green">
              <div class="panel-heading">
                  <div class="row">
                      <div class="col-xs-3">
                          <span class="glyphicon glyphicon-list-alt stats_icon"></span>
                      </div>
                      <div class="col-xs-9 text-right">
                          <div>
                              <h3 *ngIf="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
                              <h3 *ngIf="artist">{{artist['Track Count']}}</h3>
                          </div>
                          <div>Songs</div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6">
          <div class="panel panel-purple">
              <div class="panel-heading">
                  <div class="row">
                      <div class="col-xs-3">
                          <span class="glyphicon glyphicon-headphones stats_icon"></span>
                      </div>
                      <div class="col-xs-9 text-right">
                          <div>
                              <h3 *ngIf="!artist"><span class="glyphicon glyphicon-refresh loading"></span></h3>
                              <h3 *ngIf="artist">{{artist['Play Count']}} list.</h3>
                          </div>
                          <div *ngIf="artist">~{{artist['Play Count'] / artist['Track Count'] | number:'1.0-0'}} listening avg.</div>
                          <div *ngIf="!artist">Listening</div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>

  <table class="table table-striped" (window:scroll)="onScroll($event)">
  <thead>
      <tr>
          <th></th>
          <th>Name</th>
          <th>Album</th>
          <th>Year</th>
          <th>Artist</th>
          <th>Album Artist</th>
          <th>Play Count</th>
          <th>Genre</th>
          <th>Bit Rate</th>
          <th>Rating</th>
      </tr>
  </thead>
  <tbody>
      <tr *ngFor="let song of songs | sortBy : 'Year':'Album':'Track Number'">
          <td>{{song['Track Number'] ? (("0" + song['Track Number']).slice(-2)) : "--"}}</td>
          <td>{{song.Name}}</td>
          <td><a [routerLink]="['/album', song.Album]">{{song.Album}}</a></td>
          <td>{{song.Year}}</td>
          <td><a [routerLink]="['/artist', song.Artist]">{{song.Artist}}</a></td>
          <td>{{song['Album Artist'] ? song['Album Artist'] : "-" }}</td>
          <td>{{song['Play Count']}}</td>
          <td><a [routerLink]="['/genre', song.Genre]">{{song.Genre}}</a></td>
          <td [title]="song['Bit Rate']">
              <span [class]="'signal signal-' + Math.round(song['Bit Rate']/64)"></span>
            </td>
          <td *ngIf="!song['Rating Computed']" [title]="'Rating: ' + song.Rating" class="star">
              <span *ngIf="song.Rating >= 20" class="glyphicon glyphicon-star"></span>
              <span *ngIf="song.Rating >= 40" class="glyphicon glyphicon-star"></span>
              <span *ngIf="song.Rating >= 60" class="glyphicon glyphicon-star"></span>
              <span *ngIf="song.Rating >= 80" class="glyphicon glyphicon-star"></span>
              <span *ngIf="song.Rating >= 100" class="glyphicon glyphicon-star"></span>
          </td>
          <td *ngIf="song['Rating Computed']" [title]="'Computed Rating: ' + song.Rating" class="star">
              <span *ngIf="song.Rating >= 20" class="glyphicon glyphicon-star-empty"></span>
              <span *ngIf="song.Rating >= 40" class="glyphicon glyphicon-star-empty"></span>
              <span *ngIf="song.Rating >= 60" class="glyphicon glyphicon-star-empty"></span>
              <span *ngIf="song.Rating >= 80" class="glyphicon glyphicon-star-empty"></span>
              <span *ngIf="song.Rating >= 100" class="glyphicon glyphicon-star-empty"></span>
          </td>
          <td *ngIf="song.Loved" class="loved" ><span class="glyphicon glyphicon-heart heart"></span></td>
      </tr>
  </tbody>
  </table>

  <button type="button" *ngIf="moreDataAvailable" class="btn btn-default" aria-label="More" (click)="loadSongs()">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> More...
  </button>

  <!-- Go to Top Button-->
  <button type="button" class="btn btn-warning btn-top" [class.btn-top-is-visible]="atBottom"
      aria-label="Top" (click)="scrollTop()" title="Go back to Top!">
      <span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
  </button>
  <button type="button" class="btn btn-primary btn-top btn-sort" [class.btn-top-is-visible]="sortable"
      aria-label="Top" (click)="sort()" title="Sort by Album & Track Number">
      <span class="glyphicon glyphicon-sort-by-attributes" aria-hidden="true"></span>
  </button>
  </div>