Autocomplete component Class

autocomplete.component.ts

import { Component, OnInit ,ViewChild, ElementRef, Output, EventEmitter } from '@angular/core';
import { of, fromEvent,Observable } from "rxjs";
import { debounceTime, map,distinctUntilChanged,switchMap,tap } from "rxjs/operators";

@Component({
  selector: 'app-autocomplete',
  templateUrl: './autocomplete.component.html',
  styleUrls: ['./autocomplete.component.css']
})
export class AutocompleteComponent implements OnInit {
  @ViewChild('carSearchInput') carInput: ElementRef;

  cars: any = [];
  showSearches: boolean = false;
  isSearching:boolean = false;
  searchedCars: any = [];

  constructor() {
    this.cars = ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini', 'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen'];
  }

  ngOnInit() {
  	this.carSearch();
  }

  carSearch() {
    
    // Adding keyup Event Listerner on input field
    const search$ = fromEvent(this.carInput.nativeElement, 'keyup').pipe(
      map((event: any) => event.target.value),
      debounceTime(500),  
      distinctUntilChanged(),
      tap(()=> this.isSearching = true),
      switchMap((term) => term ? this.getCars(term) : of<any>(this.cars)),
      tap(() => {
        this.isSearching = false,
        this.showSearches = true;
      }));

      search$.subscribe(data => {
        this.isSearching = false
        this.searchedCars = data;
      })
  }

}