home.component.html

Audio player app

<div fxFlex fxLayout="column" fxLayoutGap="10px">
  <div fxLayout="row wrap">
    <!-- loop over the artists list and show the cards -->
    <div
      *ngFor="let artist of artists$ | async"
      fxFlex="25"
      fxFlex.md="33"
      fxFlex.sm="50"
      fxFlex.xs="100"
      fxLayout="column">
      <!-- cards here -->
      <mat-card class="mat-elevation-z1">
        <img mat-card-image [src]="artist.imgSrc"/>
        <mat-card-title> {{ artist.artist }}</mat-card-title>
        <mat-card-content> {{ artist.description }}</mat-card-content>
        <mat-card-footer>
          <button fxFlex mat-flat-button color="primary"
                  [routerLink]="['/artist',artist.id]" [queryParams]="{ song: 1}">
            See more
          </button>
        </mat-card-footer>
      </mat-card>
    </div>
  </div>
</div>