this.searchField1 = new FormControl();
    this.searchField2 = new FormControl();

    this.combinedValue = this.searchField1.valueChanges.pipe(
      mergeMap(s1 => this.searchField2.valueChanges.pipe(
            map(s2 => s1 + '' + s2))  
     )
    )

    const character = this.http.get('https://swapi.co/api/people/1');
    const characterHomeworld = this.http.get('http://swapi.co/api/planets/1');

    forkJoin([character, characterHomeworld]).subscribe(results => {
      console.log('character', results[0]);
      console.log('characterHomeworld', results[1]);
    });

import { EMPTY } from 'rxjs';

function getUser(){
  return this.http.get( url ).pipe(
    map( ... ),
    catchError( () => EMPTY )
  )
}

getUser().subscrible(
  res => {}
  error => { // Error will not working }
)

<form>
	<mat-form-field>
		<input type="text" placeholder="Country" matInput [formControl]="countryControl" [matAutocomplete]="auto">
		<mat-autocomplete #auto="matAutocomplete">
			<mat-option *ngFor="let option of filteredVaules | async" [value]="option">
				{{option}}
			</mat-option>
		</mat-autocomplete>
	</mat-form-field>
</form>

export class AppComponent {
  filteredVaules: Observable<string[]>;
  countryControl: FormControl = new FormControl();

  constructor(private _dataService: DataService) {}

  ngOnInit() {
    // Cách 1: 
    /*
     this.filteredVaules = this.countryControl.valueChanges.pipe(
      debounceTime(300),
      switchMap(val => this._dataService.GetFilteredCountries(val))
    );*/


    // Cách 2: 
    this.countryControl.valueChanges.pipe(debounceTime(500)).subscribe(val => {
      console.log(val);
      this.filteredVaules = this._dataService.GetFilteredCountries(val);
    });
  }
}