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.

    Ejemplo de funciones de ComboBox Angular

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

    EXAMPLE
    TS
    HTML
    SCSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Uso

    Primeros pasos

    Para comenzar con el componente del cuadro combinado, primero debe importar IgxComboModule en su archivo app.module.ts. Nuestro ejemplo también utiliza el componente igx-switch para alternar los valores de las propiedades del cuadro combinado, por lo que también necesitaremos el IgxSwitchModule:

    import { IgxComboModule, IgxSwitchModule } from 'igniteui-angular';
    // import { IgxComboModule, IgxSwitchModule } from '@infragistics/igniteui-angular'; for licensed package
    
    @NgModule({
        imports: [
            ...
            IgxComboModule,
            IgxSwitchModule,
            ...
        ]
    })
    export class AppModule {}
    typescript

    Configuración de plantilla

    <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>
    html

    Definición de componente

    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 filterable = true;
        public showSearchCaseIcon = true;
        public customValues = true;
        public disabled = false;
    
        public enableGroups(event) {
            this.combo.groupKey = event.checked ? 'region' : '';
        }
    typescript

    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>
    html
    import { localData } from './local-data';
    
    export class ComboDemo implements OnInit {
        public lData: any[];
    
        public ngOnInit() {
            this.lData = localData;
        }
    }
    typescript

    Si se omite la propiedad displayKey, en su lugar se utilizará la entidad valueKey.

    Siga el tema Enlace remoto de ComboBox para obtener más detalles sobre cómo vincular el componente del cuadro combinado con datos remotos.

    Configuración de superposición personalizada

    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,
        };
    }
    typescript
    <igx-combo [data]="items" [overlaySettings]="customSettings"></igx-combo>
    html

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

    EXAMPLE
    TS
    HTML
    SCSS

    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 desactivar estableciendo la propiedad filtrable en falso.

    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 [filterable]="false" [showSearchCaseIcon]="true"></igx-combo>
    html

    Valores personalizados

    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>
    html

    Enfoque de entrada de búsqueda

    La propiedad autoFocusSearch del cuadro combinado controla si la entrada de búsqueda debe recibir el foco cuando se abre la lista desplegable de un cuadro combinado. De forma predeterminada, la propiedad se establece en true. Cuando se establece en false, el foco va al contenedor de elementos del cuadro combinado. Para dispositivos móviles, esto se puede usar para evitar que aparezca el teclado del software al abrir la lista desplegable del cuadro combinado.

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

    Deshabilitar cuadro combinado

    Puede desactivar un cuadro combinado utilizando el siguiente código:

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

    Agrupamiento

    La definición de la opción groupKey de un cuadro combinado agrupará los elementos, según la clave proporcionada:

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

    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>
    html
    ...
    import { SortingDirection } from 'igniteui-angular'
    // import { SortingDirection } from '@infragistics/igniteui-angular'; for licensed package
    
    export class ComboDemo {
        ...
        public groupSortingDirection: SortingDirection = SortingDirection.Asc;
    }
    typescript

    Resumen de API

    Componentes adicionales y/o directivas con API relativas que se utilizaron:

    App Builder | CTA Banner

    Recursos adicionales

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