Recursos do ComboBox

    O controle Ignite UI for Angular ComboBox expõe vários recursos, incluindo vinculação de dados e valores, valores personalizados, filtragem, agrupamento, etc.

    Angular ComboBox Features Example

    A demonstração a seguir demonstra alguns dos recursos do combobox que são ativados/desativados em tempo de execução:

    Usage

    First Steps

    To get started with the combobox component, first you need to import the IgxComboModule in your app.module.ts file. Our sample also uses the igx-switch component to toggle combobox properties' values, so we will need the IgxSwitchModule as well:

    import { IgxComboModule } from 'igniteui-angular/combo';
import { IgxSwitchModule } from 'igniteui-angular/switch';
// import { IgxComboModule, IgxSwitchModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        ...
        IgxComboModule,
        IgxSwitchModule,
        ...
    ]
})
export class AppModule {}

    Template Configuration

    <div class="combo-container">
    <igx-combo #combo [data]="lData" displayKey="field" valueKey="field"
        [allowCustomValues]="customValues"
        [disableFiltering]="disableFiltering"
        [showSearchCaseIcon]="showSearchCaseIcon"
        [disabled]="disabled">
    </igx-combo>
</div>
<div class="switch-container">
    <igx-switch [(ngModel)]="customValues">Allow Custom Values</igx-switch>
    <igx-switch (change)="enableGroups($event)">Enable Grouping</igx-switch>
    <igx-switch [(ngModel)]="disabled">Disable Combo</igx-switch>
    <igx-switch [(ngModel)]="disableFiltering">Disable Filtering</igx-switch>
    <igx-switch *ngIf="!disableFiltering" [(ngModel)]="showSearchCaseIcon">Show Case-sensitive Icon</igx-switch>
</div>

    Component Definition

    Observe que o agrupamento é habilitado/desabilitado definindo a propriedade groupKey como uma entidade de fonte de dados correspondente ou definindo-a como uma string vazia.

        @ViewChild('combo', { read: IgxComboComponent }) public combo: IgxComboComponent;

    public disableFiltering = false;
    public showSearchCaseIcon = true;
    public customValues = true;
    public disabled = false;

    public enableGroups(event) {
        this.combo.groupKey = event.checked ? 'region' : '';
    }

    Características

    Vinculação de dados

    O seguinte trecho de código ilustra um uso básico do igx-combo vinculado a uma fonte de dados local. O valueKey especifica qual propriedade das entradas de dados será armazenada para a seleção do combobox e o displayKey especifica qual propriedade será usada para o texto do combobox:

    <igx-combo [data]="lData" valueKey="ProductID" displayKey="ProductName"></igx-combo>

    import { localData } from './local-data';

export class ComboDemo implements OnInit {
    public lData: any[];

    public ngOnInit() {
        this.lData = localData;
    }
}
    Note

    If the displayKey property is omitted then the valueKey entity will be used instead.

    Siga o tópico Vinculação remota do ComboBox para obter mais detalhes sobre como vincular o componente combobox com dados remotos.

    Custom Overlay Settings

    O componente combobox permite que os usuários alterem a maneira como uma lista de itens é mostrada. Isso pode ser feito definindo Custom OverlaySettings e passando-os para a entrada OverlaySettings do ComboBox:

    export class CustomOverlayCombo {
    ...
    public customSettings: OverlaySettings = {
        positionStrategy: new GlobalPositionStrategy(
            {
                openAnimation: scaleInCenter,
                closeAnimation: scaleOutCenter
            }),
        modal: true,
        closeOnOutsideClick: true,
    };
}

    <igx-combo [data]="items" [overlaySettings]="customSettings"></igx-combo>

    Se tudo estiver configurado corretamente, a lista da combobox será exibida centralizada, usando a GlobalPositionStrategy:

    Note

    O componente combobox usa a AutoPositionStrategy como estratégia de posição padrão.

    Filtragem

    Por padrão, a filtragem na caixa de combinação está habilitada. Ele pode ser desabilitado definindo a propriedade disableFiltering como true.

    As opções de filtragem podem ser ainda mais aprimoradas ao habilitar a sensibilidade a maiúsculas e minúsculas na pesquisa. Para exibir o ícone sensível a maiúsculas e minúsculas na entrada de pesquisa, defina a propriedade showSearchCaseIcon como true:

    <igx-combo [disableFiltering]="true" [showSearchCaseIcon]="true"></igx-combo>

    Custom Values

    A propriedade allowCustomValues controla se valores personalizados podem ser adicionados à coleção. Se estiver habilitada, um item ausente pode ser incluído usando a UI do combobox.

    <igx-combo [allowCustomValues]="true"></igx-combo>

    Search Input Focus

    The combobox's autoFocusSearch property controls if the search input should receive focus when a combobox's dropdown list is opened. By default, the property is set to true. When set to false, the focus goes to the combobox's items container. For mobile devices, this can be used to prevent the software keyboard from popping up when opening the combobox's dropdown list.

    <igx-combo [autoFocusSearch]="false"></igx-combo>

    Disable ComboBox

    Você pode desabilitar uma caixa de combinação usando o seguinte código:

    <igx-combo [disabled]="true"></igx-combo>

    Grouping

    Defining a combobox's groupKey option will group the items, according to the provided key:

    <igx-combo [groupKey]="'primaryKey'"></igx-combo>

    Você pode definir se os grupos devem ser classificados em ordem crescente ou decrescente. Por padrão, a ordem de classificação é crescente.

    <igx-combo [groupSortingDirection]="groupSortingDirection"></igx-combo>

    ...
import { SortingDirection } from 'igniteui-angular/core'
// import { SortingDirection } from '@infragistics/igniteui-angular'; for licensed package

export class ComboDemo {
    ...
    public groupSortingDirection: SortingDirection = SortingDirection.Asc;
}

    API Summary

    Componentes e/ou diretivas adicionais com APIs relativas que foram usadas:

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.