import { Component } from '@angular/core' ; import { FormControl , Validators } from '@angular/forms' ; import { Observable , of , throwError as _throw , timer } from 'rxjs' ; import { delayWhen } from 'rxjs/operators' ; import { DataSource , OptionEntry } from '@oasisdigital/angular-material-search-select' ; declare global { interface Window { testData : any ; } } const companies = window . testData . companies ; @ Component ( { selector : 'obs-demo-2-long-slow' , templateUrl : './demo-2-long-slow.component.html' } ) export class Demo2LongSlowComponent { ours = new FormControl ( null , [ Validators . required ] ) ; companyLimit = 10000 ; dataSource : DataSource | undefined = undefined ; constructor ( ) { this . updateDataSource ( ) ; } swapSources ( ) { this . companyLimit = this . companyLimit === 10000 ? 5 : 10000 ; this . updateDataSource ( ) ; } updateDataSource ( ) { const companiesToSearch = companies . slice ( 0 , this . companyLimit ) ; const dataSource = { displayValue ( value ) { console . log ( 'finding display value for' , value ) ; const id = Number ( value ) ; const company = companies . find ( ( c ) => c . id === id ) ; if ( company ) { return of ( { value : company . id , display : company . name , details : { } } ) ; } return of ( null ) ; } , search ( term ) { console . log ( 'searching for' , term ) ; if ( term === 'error' ) { return _throw ( 'testing' ) ; } const lowerTerm = typeof term === 'string' ? term . toLowerCase ( ) : '' ; const result = companiesToSearch . filter ( ( c ) => c . name . toLowerCase ( ) . indexOf ( lowerTerm ) >= 0 ) . slice ( 0 , 200 ) . map ( ( company ) => ( { value : company . id , display : company . name } ) ) ; return of ( result ) . pipe ( delayWhen ( event => timer ( Math . random ( ) * 1000 + 400 ) ) ) ; } } ; this . dataSource = dataSource ; } }