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

    Para começar com o componente combobox, primeiro você precisa importar o IgxComboModule no seu arquivo app.module.ts. Nosso exemplo também usa o componente igx-switch para alternar os valores das propriedades do combobox, então precisaremos do IgxSwitchModule também:

    import { IgxComboModule, IgxSwitchModule } from 'igniteui-angular';
// 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"
        [filterable]="filterable"
        [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)]="filterable">Enable Filtering</igx-switch>
    <igx-switch *ngIf="filterable" [(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 filterable = true;
    public showSearchCaseIcon = true;
    public customValues = true;
    public disabled = false;

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

    Características

    Data Binding

    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

    Se a propriedade displayKey for omitida, a entidade valueKey será usada em seu lugar.

    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 combobox está habilitada. Ela pode ser desabilitada configurando a propriedade filterable como false.

    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 [filterable]="false" [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

    A propriedade autoFocusSearch do combobox controla se a entrada de pesquisa deve receber foco quando a lista suspensa de um combobox é aberta. Por padrão, a propriedade é definida como true. Quando definida como false, o foco vai para o contêiner de itens do combobox. Para dispositivos móveis, isso pode ser usado para evitar que o teclado do software apareça ao abrir a lista suspensa do combobox.

    <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

    Definir a opção groupKey de uma combobox agrupará os itens de acordo com a chave fornecida:

    <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'
// 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.