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 ComboBox Templates Example

    Usage

    Para empezar con el componente ComboBox, primero necesitas importar elIgxComboModule archivo en tu app.module.ts:

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

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

    Template Types

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

    Item template

    Usa el selección[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>

    Header Item template

    Usa el selección[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>

    Header template

    Usa el selección[igxComboHeader]:

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

    Usa el selección[igxComboFooter]:

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

    Empty template

    Usa el selección[igxComboEmpty]:

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

    Add template

    Usa el selección[igxComboAddItem]:

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

    Toggle Icon Template

    Usa el selección[igxComboToggleIcon]:

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

    Clear Icon Template

    Usa el selección[igxComboClearIcon]:

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

    Templating ComboBox Input

    Cuando se usa con plantillas, losigxComboClearIcon selectores yigxComboToggleIcon cambian cómo aparecen los botones respectivos en la entrada combobox. Pasar contenido dentro de tambiénigx-combo permite plantar la entrada de combobox de forma similar a cómo se puede plantar (igx-input-groupusandoigx-prefix,igx-suffix andigxLabel). El fragmento de código a continuación ilustra cómo añadir una etiqueta y prefijo apropiados a la entrada combobox:

    <igx-combo>
    <label igxLabel>Locations</label>
    <igx-prefix><igx-icon>pin_drop</igx-icon></igx-prefix>
</igx-combo>

    API Summary

    Additional Resources

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