import { Component } from '@angular/core' ; import { timer , Observable } from 'rxjs' ; import { map } from 'rxjs/operators' ; import { tap } from 'rxjs/internal/operators' ; import { FormGroup , FormControl , Validators } from '@angular/forms' ; @ Component ( { selector : 'app-combobox-demo' , templateUrl : './combobox-demo.component.html' , } ) export class ComboboxDemoComponent { private _disabled = false ; get disabled ( ) : boolean { return this . _disabled ; } set disabled ( disabled ) { this . _disabled = disabled ; if ( disabled ) { this . form . disable ( ) ; this . formOnBlur . disable ( ) ; } else { this . form . enable ( ) ; this . formOnBlur . enable ( ) ; } } loading = false ; open = false ; states0 = [ { name : 'Alabama' , abbreviation : 'AL' , } , { name : 'Alaska' , abbreviation : 'AK' , } , { name : 'American Samoa' , abbreviation : 'AS' , } , { name : 'Arizona' , abbreviation : 'AZ' , } , { name : 'Arkansas' , abbreviation : 'AR' , } , ] ; states = [ { name : 'Alabama' , abbreviation : 'AL' , } , { name : 'Alaska' , abbreviation : 'AK' , } , { name : 'American Samoa' , abbreviation : 'AS' , } , { name : 'Arizona' , abbreviation : 'AZ' , } , { name : 'Arkansas' , abbreviation : 'AR' , } , { name : 'California' , abbreviation : 'CA' , } , { name : 'Colorado' , abbreviation : 'CO' , } , { name : 'Connecticut' , abbreviation : 'CT' , } , { name : 'Delaware' , abbreviation : 'DE' , } , { name : 'District Of Columbia' , abbreviation : 'DC' , } , { name : 'Federated States Of Micronesia' , abbreviation : 'FM' , } , { name : 'Florida' , abbreviation : 'FL' , } , { name : 'Georgia' , abbreviation : 'GA' , } , { name : 'Guam' , abbreviation : 'GU' , } , { name : 'Hawaii' , abbreviation : 'HI' , } , { name : 'Idaho' , abbreviation : 'ID' , } , { name : 'Illinois' , abbreviation : 'IL' , } , { name : 'Indiana' , abbreviation : 'IN' , } , { name : 'Iowa' , abbreviation : 'IA' , } , { name : 'Kansas' , abbreviation : 'KS' , } , { name : 'Kentucky' , abbreviation : 'KY' , } , { name : 'Louisiana' , abbreviation : 'LA' , } , { name : 'Maine' , abbreviation : 'ME' , } , { name : 'Marshall Islands' , abbreviation : 'MH' , } , { name : 'Maryland' , abbreviation : 'MD' , } , { name : 'Massachusetts' , abbreviation : 'MA' , } , { name : 'Michigan' , abbreviation : 'MI' , } , { name : 'Minnesota' , abbreviation : 'MN' , } , { name : 'Mississippi' , abbreviation : 'MS' , } , { name : 'Missouri' , abbreviation : 'MO' , } , { name : 'Montana' , abbreviation : 'MT' , } , { name : 'Nebraska' , abbreviation : 'NE' , } , { name : 'Nevada' , abbreviation : 'NV' , } , { name : 'New Hampshire' , abbreviation : 'NH' , } , { name : 'New Jersey' , abbreviation : 'NJ' , } , { name : 'New Mexico' , abbreviation : 'NM' , } , { name : 'New York' , abbreviation : 'NY' , } , { name : 'North Carolina' , abbreviation : 'NC' , } , { name : 'North Dakota' , abbreviation : 'ND' , } , { name : 'Northern Mariana Islands' , abbreviation : 'MP' , } , { name : 'Ohio' , abbreviation : 'OH' , } , { name : 'Oklahoma' , abbreviation : 'OK' , } , { name : 'Oregon' , abbreviation : 'OR' , } , { name : 'Palau' , abbreviation : 'PW' , } , { name : 'Pennsylvania' , abbreviation : 'PA' , } , { name : 'Puerto Rico' , abbreviation : 'PR' , } , { name : 'Rhode Island' , abbreviation : 'RI' , } , { name : 'South Carolina' , abbreviation : 'SC' , } , { name : 'South Dakota' , abbreviation : 'SD' , } , { name : 'Tennessee' , abbreviation : 'TN' , } , { name : 'Texas' , abbreviation : 'TX' , } , { name : 'Utah' , abbreviation : 'UT' , } , { name : 'Vermont' , abbreviation : 'VT' , } , { name : 'Virgin Islands' , abbreviation : 'VI' , } , { name : 'Virginia' , abbreviation : 'VA' , } , { name : 'Washington' , abbreviation : 'WA' , } , { name : 'West Virginia' , abbreviation : 'WV' , } , { name : 'Wisconsin' , abbreviation : 'WI' , } , { name : 'Wyoming' , abbreviation : 'WY' , } , ] ; vertical = { one : '3' , two : '2' , three : this . states [ 1 ] , four : [ this . states [ 3 ] , this . states [ 4 ] ] , five : [ this . states [ 2 ] , this . states [ 3 ] ] , } ; horizontal = { one : '' , two : '2' , three : this . states [ 1 ] , four : [ this . states [ 3 ] , this . states [ 4 ] ] , five : [ this . states [ 2 ] , this . states [ 3 ] ] , } ; compact = { one : '' , two : '2' , three : this . states [ 1 ] , four : [ this . states [ 3 ] , this . states [ 13 ] ] , five : [ this . states [ 5 ] , this . states [ 8 ] , this . states [ 10 ] , this . states [ 15 ] ] , } ; validateOnBlur : string | undefined ; asyncStates$ : Observable < any > | undefined ; STATES_SERVICE = { getStates : ( filterString ) => timer ( 1500 ) . pipe ( map ( ( ) => this . states . filter ( s => s . name . toLowerCase ( ) . indexOf ( filterString . toLowerCase ( ) ) > - 1 ) ) ) , } ; fetchStates ( filter = '' ) { this . loading = true ; this . asyncStates$ = this . STATES_SERVICE . getStates ( filter ) . pipe ( tap ( ( ) => ( this . loading = false ) ) ) ; } form = new FormGroup ( { model : new FormControl ( this . states [ 15 ] , Validators . required ) , } ) ; formOnBlur = new FormGroup ( { model : new FormControl ( null , { validators : [ Validators . required ] , updateOn : 'blur' } ) , } ) ; }