import { Component } from '@angular/core';
import { FormControl, FormGroup, FormBuilder } from '@angular/forms';
import { SearchService } from './services/search.service';
import { map } from 'rxjs/operators';
import { Artist } from './types/artist.type';
<form [formGroup]="coolForm"><input formControlName="search" placeholder="Search Spotify artist"></form>
<div *ngFor="let artist of artists$ | async">
export class AppComponent {
searchField: FormControl;
artists$: Observable<Artist[]>;
constructor(private searchService:SearchService, private fb:FormBuilder) {
this.searchField = new FormControl();
this.coolForm = fb.group({search: this.searchField});
this.artists$ = this.searchField.valueChanges.pipe(
mergeMap(term => this.searchService.search(term)),
map(result => result.artist.items)