import { Component } from '@angular/core' ; import { FormControl } from '@angular/forms' ; import { Observable , of } from 'rxjs' ; import { DataSource , OptionEntry } from '@oasisdigital/angular-material-search-select' ; import { Company } from '../types' ; declare global { interface Window { testData : any ; } } const companies = window . testData . companies ; @ Component ( { selector : 'obs-demo-5-multi-column' , templateUrl : './demo-5-multi-column.component.html' , styles : [ ] } ) export class Demo5MultiColumnComponent implements DataSource { companyControl = new FormControl ( null , [ ] ) ; displayValue ( value ) { console . log ( 'finding display value for' , value ) ; const company = companies . find ( ( c ) => c . id === parseInt ( value || '' , 10 ) ) ; if ( company ) { return of ( { value : company . id , display : company . name , details : { } } ) ; } return of ( null ) ; } search ( term ) { console . log ( 'searching for' , term ) ; const lowerTerm = typeof term === 'string' ? term . toLowerCase ( ) : '' ; const result = companies . filter ( ( c ) => c . name . toLowerCase ( ) . indexOf ( lowerTerm ) >= 0 ) . slice ( 0 , 200 ) . map ( ( company ) => ( { value : company . id , display : company . name , details : company } ) ) ; return of ( result ) ; } }