Funciones del cuadro combinado

    El control ComboBox Ignite UI for Angular expone varias características, como el enlace de datos y valores, los valores personalizados, el filtrado, la agrupación, etc.

    Angular ComboBox Features Example

    La siguiente demostración muestra algunas de las funciones del cuadro combinado que se habilitan/deshabilitan en tiempo de ejecución:

    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, 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"
        [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

    Tenga en cuenta que la agrupación se habilita/deshabilita configurando la propiedad groupKey en una entidad de origen de datos correspondiente o configurándola en una cadena vacía.

        @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

    El enlace de datos

    El siguiente fragmento de código ilustra un uso básico del combo igx vinculado a una fuente de datos local. valueKey especifica qué propiedad de las entradas de datos se almacenará para la selección del cuadro combinado y displayKey especifica qué propiedad se usará para el texto del cuadro combinado:

    <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 el tema Enlace remoto de ComboBox para obtener más detalles sobre cómo vincular el componente del cuadro combinado con datos remotos.

    Custom Overlay Settings

    El componente de cuadro combinado permite a los usuarios cambiar la forma en que se muestra una lista de elementos. Esto se puede hacer definiendo Custom OverlaySettings y pasándolos a la entrada OverlaySettings del 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>

    Si todo está configurado correctamente, la lista del cuadro combinado se mostrará centrada, utilizando GlobalPositionStrategy:

    Note

    El componente del cuadro combinado utiliza AutoPositionStrategy como estrategia de posición predeterminada.

    Filtración

    De forma predeterminada, el filtrado en el cuadro combinado está habilitado. Se puede deshabilitar estableciendo la propiedad disableFiltering en true.

    Las opciones de filtrado se pueden mejorar aún más habilitando la búsqueda entre mayúsculas y minúsculas. Para mostrar el icono que distingue entre mayúsculas y minúsculas en la entrada de búsqueda, establezca la propiedad showSearchCaseIcon en verdadero:

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

    Custom Values

    La propiedad enableCustomValues controla si se pueden agregar valores personalizados a la colección. Si está habilitado, se podría incluir un elemento faltante mediante la interfaz de usuario del cuadro combinado.

    <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

    Puede desactivar un cuadro combinado utilizando el siguiente 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>

    Puede establecer si los grupos deben ordenarse en orden ascendente o descendente. Por defecto el orden de clasificación es ascendente.

    <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 adicionales y/o directivas con API relativas que se utilizaron:

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.