Modelos de ComboBox

O componente Ignite UI for Angular ComboBox permite definir modelos personalizados para diferentes áreas, como cabeçalho, rodapé, itens, lista vazia e botão de adição.

Angular ComboBox Templates Example

Usage

Para começar a usar o componente ComboBox, primeiro você precisa importar o IgxComboModule no seu arquivo app.module.ts:

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

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

Template Types

Ao definir modelos de combobox, você precisa referenciá-los usando os seguintes nomes de referência predefinidos:

Item template

Use o seletor [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

Use o seletor [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

Use o seletor [igxComboHeader]:

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

Use o seletor [igxComboFooter]:

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

Empty template

Use o seletor [igxComboEmpty]:

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

Add template

Use o seletor [igxComboAddItem]:

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

Toggle Icon Template

Use o seletor [igxComboToggleIcon]:

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

Clear Icon Template

Use o seletor [igxComboClearIcon]:

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

Templating ComboBox Input

Quando usados com modelos, os seletores igxComboClearIcon e igxComboToggleIcon mudam como os respectivos botões aparecem na entrada do combobox. Passar conteúdo dentro do igx-combo também permite a criação de modelos da entrada do combobox semelhante à maneira como um igx-input-group pode ser criado (usando igx-prefix, igx-suffix e igxLabel). O trecho de código abaixo ilustra como adicionar um rótulo e prefixo apropriados à entrada do combobox:

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

API Summary

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.