Innqube/ng2-iq-select2

<div class="container">
    <form [formGroup]="form">
        <div class="form-group">
            <label>Name</label>
            <input class="form-control" type="text" formControlName="firstname"/>
        </div>
        <div class="form-group">
            <label>Lastname</label>
            <input class="form-control form-control-sm" type="text" formControlName="lastname"/>
        </div>
        <div class="form-group">
            <label>Options (standard select)</label>
            <select class="form-control form-control-sm" formControlName="option">
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
                <option>Option 4</option>
            </select>
        </div>

        <div class="form-group">
            <label>Country (Single)</label>
            <input type="checkbox" formControlName="habilitado"/>
            <a (click)="countrySingle.focus()"> set focus</a>
            <iq-select2 #countrySingle css="form-control form-control-sm" placeholder="Start writing..."
                        formControlName="countrySingle"
                        [dataSourceProvider]="listItems"
                        [minimumInputLength]="0"
                        [iqSelect2ItemAdapter]="entityToIqSelect2Item"
                        referenceMode='entity' [multiple]='false' (onSelect)="onSelect($event)"
                        (onRemove)="onRemove($event)" [selectedProvider]="getItems"
                        *ngIf="form.controls.habilitado.value"></iq-select2>
        </div>
        <div class="form-group">
            <label>Country (Multiple)</label>
            <iq-select2 css="form-control form-control-sm" placeholder="Start writing..."
                        formControlName="countryMultiple"
                        [dataSourceProvider]="listItems"
                        [iqSelect2ItemAdapter]="entityToIqSelect2Item"
                        [clientMode]="true"
                        [badgeColor]="'dark'"
                        referenceMode='entity' [multiple]='true' (onSelect)="onSelect($event)"
                        (onRemove)="onRemove($event)" [selectedProvider]="getItems"></iq-select2>
        </div>
        <div class="form-group">
            <label>Country (Multiple disabled)</label>
            <iq-select2 css="form-control form-control-sm" placeholder="Start writing..."
                        formControlName="countryMultipleDisabled" [dataSourceProvider]="listItems"
                        referenceMode='entity' [multiple]='true' (onSelect)="onSelect($event)"
                        [iqSelect2ItemAdapter]="entityToIqSelect2Item"
                        (onRemove)="onRemove($event)" [selectedProvider]="getItems"></iq-select2>
        </div>
        <div class="form-group">
            <label>Country (Single minimumInputLength = 0)</label>
            <iq-select2 css="form-control form-control-sm" placeholder="Start writing..."
                        formControlName="countrySingleMin0"
                        [dataSourceProvider]="listItems"
                        [iqSelect2ItemAdapter]="entityToIqSelect2Item"
                        [minimumInputLength]='0' referenceMode='entity' [multiple]='false' (onSelect)="onSelect($event)"
                        (onRemove)="onRemove($event)" [selectedProvider]="getItems"></iq-select2>
        </div>
        <div class="form-group">
            <label>Country (Multiple minimumInputLength = 0)</label>
            <iq-select2 css="form-control form-control-sm" placeholder="Start writing..."
                        formControlName="countryMultipleMin0"
                        [dataSourceProvider]="listItems"
                        [iqSelect2ItemAdapter]="entityToIqSelect2Item"
                        [minimumInputLength]='0' referenceMode='entity' [multiple]='true' (onSelect)="onSelect($event)"
                        (onRemove)="onRemove($event)" [selectedProvider]="getItems" [clientMode]="true"></iq-select2>
        </div>

        <div class="form-group">
            <label>Country (Single minimumInputLength = 0 using results count and delayed response)</label>
            <iq-select2 css="form-control form-control-sm" placeholder="Start writing..."
                        formControlName="countryMin0Count"
                        [dataSourceProvider]="listItemsMax"
                        [iqSelect2ItemAdapter]="entityToIqSelect2Item"
                        [resultsCount]="count"
                        [minimumInputLength]='0' referenceMode='entity' (onSelect)="onSelect($event)"
                        (onRemove)="onRemove($event)" [selectedProvider]="getItems"></iq-select2>
        </div>

        <div class="form-group">
            <label>Country (Multiple minimumInputLength = 0 using results count and delayed response)</label>
            <iq-select2 css="form-control form-control-sm" placeholder="Start writing..."
                        formControlName="countryMin0Count"
                        [dataSourceProvider]="listItemsMax"
                        [iqSelect2ItemAdapter]="entityToIqSelect2Item"
                        [resultsCount]="count"
                        [multiple]="true"
                        [minimumInputLength]='0' referenceMode='entity' (onSelect)="onSelect($event)"
                        (onRemove)="onRemove($event)" [selectedProvider]="getItems"></iq-select2>
        </div>

        <div class="form-group">
            <label>Country Custom Template</label>
            <iq-select2 css="form-control form-control-sm" placeholder="Start writing..."
                        formControlName="countrySingleMin0"
                        [dataSourceProvider]="listItems"
                        [iqSelect2ItemAdapter]="entityToIqSelect2Item"
                        [minimumInputLength]='0' referenceMode='entity' (onSelect)="onSelect($event)"
                        (onRemove)="onRemove($event)" [selectedProvider]="getItems" [clientMode]="true">
                <div *iq-select2-template="let item = $entity; let i = $index">
                    <span [style.color]="item.color">[{{item.code}}]</span> {{item.name}}
                </div>
            </iq-select2>
        </div>

        <button class="btn btn-primary" type="submit" (click)="send(form.value)">Send</button>
        <button type="button" (click)="reset()">Reset</button>
    </form>
</div>