<h1>{{album.name}}</h1>
<p>Full track listing for {{album.name}}
</p>
<br>
<mat-card>
<mat-card-content fxLayout="row wrap" fxLayout.xs="column">
<div fxflex><img [src]="album.images[1].url" alt="album cover" [style.margin]="'10px'"
[style.max-width]="'90%'" /></div>
<div fxFlex>
<div [style.min-width]="'300px'" [style.margin]="'10px'">
<strong>Record Label: </strong> {{album.label}}<br />
<strong>Release Date: </strong> {{album.release_date|date:"MM/dd/yy"}}<br /><br />
<strong>Tracks:</strong> {{album.total_tracks}}<br />
<strong>Popularity: </strong>{{album.popularity}}<br /><br />
<mat-chip-list aria-label="Artist selection" *ngFor="let artist of album.artists">
<a routerLink="about"></a>
<mat-chip routerLink="/artist">{{artist.name}}</mat-chip>
</mat-chip-list>
<br />
<!-- Done -->
<div *ngFor="let copyright of album.copyrights">{{copyright.text}}</div>
</div>
</div>
</mat-card-content>
</mat-card>
<br /><br />
<h2>Track Listing</h2>
<mat-list>
<!-- Single "Responsive" Material List Item-->
<mat-list-item *ngFor="let track of album.tracks.items ;let i = index;">
<mat-icon mat-list-icon>queue_music</mat-icon>
<div mat-line>
<mat-card>
<mat-card-content>{{i+1}}: {{track.name}} - {{ (track. duration_ms / 60000 ) .toFixed(2) }}
<!-- NOTE 3.34 was determined by using (duration_ms / 60000).toFixed(2) -->
</mat-card-content>
</mat-card>
</div>
</mat-list-item>
<!-- -->
</mat-list>