shilpasyal55

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: `
    <div class="row">
      <div class="col-xl-4" style="position: relative; left: 33%;margin-top: 2%">
        <alert type="info" *ngIf="car">
          Your Selected Car: <strong>{{car}}</strong>
        </alert>

shilpasyal55

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 {

shilpasyal55

<div class="card container">
  <div class="label">
    <label for="car">Search Car:</label>
  </div>
  <div>
    <input id="car" #carSearchInput placeholder="Search Car By Name" class="form-control" type="text" autocomplete="off" (click)="showSearches = true">
  </div>
  
  <!--  DropDown Starts  -->
    <div class="card" [hidden]="!showSearches">

shilpasyal55

  getCars(name): Observable<any> {
   //Here we perrform the simple call to filter function. You can also call to API here for the desired result.
   
    return of(this.filterCars(name)) //used `of` to convert array to Observable
    //return this.http.post("url", data, {headers})  //to get the result from API use this line
  }

  filterCars(name) {
    return this.cars.filter((val) => val.toLowerCase().includes(name.toLowerCase()) == true )

shilpasyal55

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 {