import { Component , OnInit } from '@angular/core' ; import { FormControl } from '@angular/forms' ; import { Observable } from 'rxjs' ; import { map , startWith } from 'rxjs/operators' ; export interface User { name : string ; } title @ Component ( { selector : 'autocomplete-display-example' , templateUrl : 'autocomplete-display-example.html' , styleUrls : [ 'autocomplete-display-example.css' ] , } ) export class AutocompleteDisplayExample implements OnInit { myControl = new FormControl ( ) ; options : User [ ] = [ { name : 'Mary' } , { name : 'Shelley' } , { name : 'Igor' } ] ; filteredOptions : Observable < User [ ] > ; ngOnInit ( ) { this . filteredOptions = this . myControl . valueChanges . pipe ( startWith < string | User > ( '' ) , map ( value => typeof value === 'string' ? value : value . name ) , map ( name => name ? this . _filter ( name ) : this . options . slice ( ) ) ) ; } displayFn ( user ? ) { return user ? user . name : undefined ; } private _filter ( name ) { const filterValue = name . toLowerCase ( ) ; return this . options . filter ( option => option . name . toLowerCase ( ) . indexOf ( filterValue ) === 0 ) ; } }