Plantillas de cuadros combinados

    El componente ComboBox Ignite UI for Angular permite definir plantillas personalizadas para diferentes áreas, como encabezado, pie de página, elementos, lista vacía y botón de agregar.

    Angular Ejemplo de plantillas de ComboBox

    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

    Para comenzar con el componente ComboBox, primero debe importar IgxComboModule en su archivo app.module.ts:

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

    Tipos de plantillas

    Al definir plantillas de cuadros combinados, debe hacer referencia a ellas utilizando los siguientes nombres de referencia predefinidos:

    Plantilla de artículo

    Utilice el selector [igxComboItem]:

    <igx-combo #templateCombo [data]="lData" [valueKey]="'field'" >
        <ng-template igxComboItem let-display let-key="valueKey">
            <div class="item">
                <span class="state">{{ display[key] }}</span>
                <span class="region">{{ display.region }}</span>
            </div>
        </ng-template>
    </igx-combo>
    html

    Plantilla de elemento de encabezado

    Utilice el selector [igxComboHeaderItem]:

    <igx-combo #templateCombo [data]="lData" [groupKey]="'region'">
        <ng-template igxComboHeaderItem let-display let-key="groupKey">
            <div class="header-item">Region: {{ display[key] }}</div>
        </ng-template>
    </igx-combo>
    html

    Plantilla de encabezado

    Utilice el selector [igxComboHeader]:

    <igx-combo>
        <ng-template igxComboHeader>
            <div class="header-class">State - Region</div>
        </ng-template>
    </igx-combo>
    html

    Utilice el selector [igxComboFooter]:

    <igx-combo>
        <ng-template igxComboFooter>
            <div class="footer-class">Infragistics 2018</div>
        </ng-template>
    </igx-combo>
    html

    Plantilla vacía

    Utilice el selector [igxComboEmpty]:

    <igx-combo>
        <ng-template igxComboEmpty>
            <span class="empty-class">No available states</span>
        </ng-template>
    </igx-combo>
    html

    Agregar plantilla

    Utilice el selector [igxComboAddItem]:

    <igx-combo>
        <ng-template igxComboAddItem>
            <button igxButton="flat">
                Add Location
            </button>
        </ng-template>
    </igx-combo>
    html

    Alternar plantilla de icono

    Utilice el selector [igxComboToggleIcon]:

    <igx-combo>
        <ng-template igxComboToggleIcon let-collapsed>
            <igx-icon>{{ collapsed ? 'expand_more' : 'expand_less'}}</igx-icon>
        </ng-template>
    </igx-combo>
    html

    Borrar plantilla de icono

    Utilice el selector [igxComboClearIcon]:

    <igx-combo>
        <ng-template igxComboClearIcon>
            <igx-icon>cancel</igx-icon>
        </ng-template>
    </igx-combo>
    html

    Plantillas de entrada de cuadro combinado

    Cuando se usan con plantillas, los selectores igxComboClearIcon y igxComboToggleIcon, cambian la forma en que aparecen los botones respectivos en la entrada del cuadro combinado. Pasar contenido dentro del igx-combo también permite crear plantillas para la entrada del cuadro combinado de manera similar a la forma en que se puede crear una plantilla para un igx-input-group (usando igx-prefix, igx-suffix e igxLabel). El siguiente fragmento de código ilustra cómo agregar una etiqueta y un prefijo apropiados a la entrada del cuadro combinado:

    <igx-combo>
        <label igxLabel>Locations</label>
        <igx-prefix><igx-icon>pin_drop</igx-icon></igx-prefix>
    </igx-combo>
    html
    App Builder | CTA Banner

    Resumen de API

    Recursos adicionales

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