gmerabishvili

 @Injectable()
 export class ApiService {
 private artistUrl = 'api/artists';
 
 artists$ = this._http.get<Artist[]>(this.artistUrl)
    .pipe(
      catchError(this.handleError)
    );
  
  constructor(private _http: HttpClient) {}

gmerabishvili

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

export class HomeComponent implements OnInit {
error$ = new Subject<string>();
  
artists$: Observable<Song> = this._apiService.artists$

gmerabishvili

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