ComboBox (コンボボックス) テンプレート

Ignite UI for Angular ComboBox コンポーネントでは、ヘッダー、フッター、項目、空のリスト、追加ボタンなどのさまざまな領域にカスタムテンプレートを定義できます。

Angular コンボボックステンプレートの例

使用方法

ComboBox コンポーネントを初期化にするには、まず IgxComboModule を app.module.ts ファイルにインポートします。

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

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

テンプレートタイプ

コンボボックスのテンプレートを定義する場合、定義済みの参照名を使用して参照してください。

項目テンプレート

セレクター [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>

ヘッダー項目テンプレート

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

ヘッダーテンプレート

セレクター [igxComboHeader] の使用:

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

フッターテンプレート

セレクター [igxComboFooter] の使用:

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

空のテンプレート

セレクター [igxComboEmpty] の使用:

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

テンプレートの追加

セレクター [igxComboAddItem] の使用:

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

トグルアイコンテンプレート

セレクター [igxComboToggleIcon] の使用:

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

クリアアイコンテンプレート

セレクター [igxComboClearIcon] の使用:

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

コンボボックス入力のテンプレート化

テンプレートで使用した場合、igxComboClearIcon および igxComboToggleIcon セレクターがコンボボックス入力での各ボタンの表示方法を変更します。igx-combo 内のコンテンツを渡すと、igx-input-group をテンプレート化する方法 (igx-prefix、igx-suffix、igxLabel を使用) と同様に、コンボボックス入力のテンプレート化も可能になります。以下のコードスニペットは、適切なラベルやプレフィックスをコンボボックスに追加する方法を示します。

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

API まとめ

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

ComboBox (コンボボックス) テンプレート

Angular コンボボックス テンプレートの例