import { Component } from '@angular/core' ; import { FormControl } from '@angular/forms' ; import { Observable } from 'rxjs' ; import { map , startWith } from 'rxjs/operators' ; export interface State { flag : string ; name : string ; population : string ; } title @ Component ( { selector : 'autocomplete-overview-example' , templateUrl : 'autocomplete-overview-example.html' , styleUrls : [ 'autocomplete-overview-example.css' ] , } ) export class AutocompleteOverviewExample { stateCtrl = new FormControl ( ) ; filteredStates : Observable < State [ ] > ; states : State [ ] = [ { name : 'Arkansas' , population : '2.978M' , flag : 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg' } , { name : 'California' , population : '39.14M' , flag : 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg' } , { name : 'Florida' , population : '20.27M' , flag : 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg' } , { name : 'Texas' , population : '27.47M' , flag : 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg' } ] ; constructor ( ) { this . filteredStates = this . stateCtrl . valueChanges . pipe ( startWith ( '' ) , map ( state => state ? this . _filterStates ( state ) : this . states . slice ( ) ) ) ; } private _filterStates ( value ) { const filterValue = value . toLowerCase ( ) ; return this . states . filter ( state => state . name . toLowerCase ( ) . indexOf ( filterValue ) === 0 ) ; } }