import { Component , OnInit , ViewChild } from '@angular/core' ; import { Observable } from 'rxjs' ; import { FormBuilder , FormControl , FormGroup , Validators } from '@angular/forms' ; import { map , tap } from 'rxjs/operators' ; import { Country , DataService } from './data.service' ; import { IqSelect2Item } from '../../projects/ng2-iq-select2/src/lib/iq-select2/iq-select2-item' ; import { IqSelect2Component } from '../../projects/ng2-iq-select2/src/lib/iq-select2/iq-select2.component' ; @ Component ( { selector : 'app-root' , templateUrl : './app.component.html' , styleUrls : [ './app.component.css' ] } ) export class AppComponent implements OnInit { public form : FormGroup ; public listItems : ( term : string ) => Observable < Country [ ] > ; public listItemsMax : ( term : string , ids : string [ ] ) => Observable < Country [ ] > ; public getItems : ( ids : string [ ] ) => Observable < Country [ ] > ; public entityToIqSelect2Item : ( entity : Country ) => IqSelect2Item ; public count : number ; @ ViewChild ( 'countrySingle' ) countrySingle : IqSelect2Component ; constructor ( private dataService , private formBuilder ) { } ngOnInit ( ) { this . form = this . formBuilder . group ( { firstname : { value : '' , disabled : true } , lastname : new FormControl ( '' ) , option : new FormControl ( '' ) , countrySingle : [ { id : '16' , name : 'Argentina' , code : 'AR' , color : '#c1ee5b' } , Validators . required ] , countryMultiple : null , countryMultipleDisabled : new FormControl ( { value : [ { id : '16' , name : 'Argentina' , code : 'AR' , color : '#c1ee5b' } , { id : '17' , name : 'Indonesia' , code : 'ID' , color : '#19f77a' } ] , disabled : true } ) , countrySingleMin0 : null , countryMultipleMin0 : [ [ { id : '16' , name : 'Argentina' , code : 'AR' , color : '#c1ee5b' } ] ] , countryMin0Count : null , habilitado : true } ) ; this . initializeCountryIqSelect2 ( ) ; this . form . valueChanges . subscribe ( ( ) => { } ) ; } private initializeCountryIqSelect2 ( ) { this . listItems = ( term ) => this . dataService . listData ( term ) ; this . listItemsMax = ( term , ids ) => { const selectedCount = ids ? ids . length : 0 ; return this . dataService . listDataMax ( term , 3 + selectedCount ) . pipe ( tap ( response => this . count = response . count ) , map ( ( response ) => response . results ) ) ; } ; this . getItems = ( ids ) => this . dataService . getItems ( ids ) ; this . entityToIqSelect2Item = ( entity ) => { return { id : entity . id , text : entity . name , entity : entity } ; } ; } send ( formJson ) { } onSelect ( item ) { } onRemove ( item ) { } reset ( ) { this . form . reset ( ) ; } }