Untitled

<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>