Angular Select の概要

Angular Material Select は、データ入力とデータ表示に使用されるフォームコントロールであり、ユーザーはいくつかの事前定義された値を含むリストから特定の値を選択できます。Angular Select コンポーネントは、ドロップダウンリストに非常に似ています。Select コンポーネントは、ユーザーがオプションのリストから選択してデータを送信できるフォーム内で使用されますが、DropDown コンポーネントはページのコンテンツをフィルター処理またはソートします。

Ignite UI for Angular Material Select コンポーネントは、ドロップダウンに配置された項目のリストからの単一選択できます。このマテリアルベースのフォームコントロールは、単一または複数の文字の一致に基づいて、選択などの迅速な項目リストナビゲーションを提供します。IgxSelectComponent は IgxDropDownComponent を拡張するため、Select インスタンスですべての Drop Down イベントを処理できます。

Angular Select の例

以下は基本的な Angular Select の例です。クリックごとに開く、いくつかの選択肢のリストを表示するシンプルなコンテキストメニューがあります。

Ignite UI で Angular Select を使用する方法

Ignite UI for Angular Select コンポーネントを初期化にするには、まず IgxSelectModule を app.module ファイルにインポートします。

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

次に選択する項目のリストと共に igx-select を追加します。igx-select-item を使用して、igx-select に含まれる項目を表示します。

<igx-select>
    <label igxLabel>Simple Select</label>
    <igx-select-item value="Orange">Orange</igx-select-item>
    <igx-select-item value="Apple">Apple</igx-select-item>
    <igx-select-item value="Banana">Banana</igx-select-item>
    <igx-select-item value="Mango">Mango</igx-select-item>
</igx-select>

その他 *ngFor 構造ディレクティブに表示したい項目のコレクションを使用する方法があります。

public items: string[] = ['Orange', 'Apple', 'Banana', 'Mango'];

<igx-select [(ngModel)]="selected">
    <label igxLabel>Simple Select</label>
    <igx-select-item *ngFor="let item of items" [value]="item">
        {{item}}
    </igx-select-item>
</igx-select>

デフォルトでは、Select コンポーネントは入力フィールドの item 要素の innerText を使用します。複雑な項目テンプレートの場合、text プロパティを明示的に設定して、項目が選択された場合入力フィールドに何を表示するかを指定できます。例:

<igx-select>
    <igx-select-item *ngFor="let item of items" [value]="item.value" [text]="item.text">
        {{item.text}} ( {{item.count}} )
    </igx-select-item>
</igx-select>

より複雑な項目テンプレートで text プロパティを確認するには、以下のグループ化サンプルグループ選択を参照してください。

入力プロパティ

Select コンポーネントは、入力グループに適用可能な次のディレクティブをサポートしています。

igxLabel - Angular Select 入力とのリンクは aria-labelledby を介して自動的に処理されるため、for プロパティを設定する必要はありません。
igx-prefix/igxPrefix
igx-suffix/igxSuffix - 組み込みのトグルボタンサフィックスが常に最後に表示されることに注意してください。
igx-hint/igxHint

<igx-select [(ngModel)]="selected">
    <label igxLabel>Pick a fruit</label>
    <igx-prefix>
        <span class="bio-prefix">BIO</span>
    </igx-prefix>
    <igx-suffix *ngIf="selected">
        <igx-icon (click)="clearSelection($event)">clear</igx-icon>
    </igx-suffix>
    <igx-hint>Choose a banana</igx-hint>
    <igx-select-item *ngFor="let item of items" [value]="item">
        {{item}}
    </igx-select-item>
</igx-select>

Note

Select コンポーネントに placeholder が指定されておらず、選択も行われていない場合、igxLabel は遷移し、プレースホルダーが適切な場所に表示されます。

選択項目のグループ化

項目グループを視覚的に分離するために、Select コンポーネントは、項目を <igx-select-item-group> にラップすることで項目のグループ化をサポートします。これは、コンポーネントを宣言するために反復可能な階層データに適しています。以下の例では、各グループには label と items のコレクションがあります。

public greengrocery: Array<{ label: string, items: Array<{ type: string, origin: string }> }> = [
    { label: 'Fruits', items: [
            { type: 'Apple', origin: 'local' },
            { type: 'Orange', origin: 'import' },
            { type: 'Banana', origin: 'import'}
        ]
    },
    { label: 'Vegetables', items: [
            { type: 'Cucumber', origin: 'local' },
            { type: 'Potato', origin: 'import' },
            { type: 'Pepper', origin: 'local' }
        ]
    }
];

次にテンプレートファイルでこれらのオブジェクトを反復して項目へ適切にアクセスします。

<igx-select #select>
    <label igxLabel>Select With Groups</label>
    <igx-select-item-group *ngFor="let group of greengrocery" [label]="group.label">
        <igx-select-item *ngFor="let item of group.items" [value]="item.type" [text]="item.type">
            {{item.type}}
            <igx-icon
                title="Local product"
                *ngIf="item.origin === 'local'; else templateImport"
            >local_shipping</igx-icon>
            <ng-template #templateImport>
                <igx-icon title="Import product">flight</igx-icon>
            </ng-template>
        </igx-select-item>
    </igx-select-item-group>
</igx-select>

ヘッダーとフッター

現在 Select コンポーネントにデフォルトのヘッダーとフッターのテンプレートはありません。ただし、ヘッダーまたはフッターテンプレートを追加するには、igxSelectHeader または igxSelectFooter でそれぞれマークします。これらはカスタムテンプレートであるため、スタイル設定も定義する必要があります。

以下の例では、ヘッダーとフッターの両方の ng テンプレートが定義されています。ヘッダーには、igx-buttongroup で実装された基本的なフィルタリングがあります。フッターには、配信方法に基づいて、すべての項目の静的な集計が含まれます。

<igx-select>
    <label igxLabel>Pick your fruit</label>
    <igx-select-item *ngFor="let fruit of fruits" [value]="fruit.type" [text]="fruit.type" [ngSwitch]="fruit.delivery">
        {{fruit.type}}
        <igx-icon *ngSwitchCase="'flight'">flight</igx-icon>
        <igx-icon *ngSwitchCase="'train'">train</igx-icon>
        <igx-icon *ngSwitchCase="'boat'">directions_boat</igx-icon>
    </igx-select-item>
    <ng-template igxSelectHeader>
        <div class="custom-select-header">
            <span class="sample-template-heading">DELIVERY METHOD</span>
            <igx-buttongroup (click)="filter($event.target.title)">
                    <button igxButton title="flight"><igx-icon title="flight">flight</igx-icon></button>
                    <button igxButton title="train"><igx-icon title="train">train</igx-icon></button>
                    <button igxButton title="boat"><igx-icon title="boat">directions_boat</igx-icon></button>
            </igx-buttongroup>
        </div>
    </ng-template>
    <ng-template igxSelectFooter>
        <div class="custom-select-footer">
            <span class="sample-template-heading">TOTAL</span>
            <div class="sample-template-icons">
                <span class="sample-template-icons__item">
                    <igx-icon
                        title="flight"
                        [class.important-icon]="selected === 'flight'"
                    >flight</igx-icon>
                    {{flightCount}}
                </span>
                <span class="sample-template-icons__item">
                    <igx-icon
                        title="train"
                        [class.important-icon]="selected === 'train'"
                    >train</igx-icon>
                    {{trainCount}}
                </span>
                <span class="sample-template-icons__item">
                    <igx-icon
                        title="boat"
                        [class.important-icon]="selected === 'boat'"
                    >directions_boat
                    </igx-icon>
                    {{boatCount}}
                </span>
            </div>
        </div>
    </ng-template>
</igx-select>

Angular Select のカスタム切り替えボタン

igxSelectToggleIcon ディレクティブを使用するか、あるいは toggleIconTemplate プロパティに TemplateRef を設定して、デフォルトの切り替えボタンをカスタマイズできます。

<igx-select #select>
    ...
    <ng-template igxSelectToggleIcon let-collapsed>
        <igx-icon>{{ collapsed ? 'add_circle' : 'add_circle_outline'}}</igx-icon>
    </ng-template>
    ...
<igx-select>

キーボードナビゲーション

選択がフォーカスされているときに Space、Enter、または ALT + 上矢印/下矢印 キーをクリックして、igx-select を開きます。
ALT + 上矢印/下矢印 の組み合わせ、または Enter、Space、Esc、Tab キーのいずれかを使用して、igx-select を閉じます。
上矢印/下矢印 キーを使用して項目間を移動します。
Home または End キーを使用して、リストの最初と最後の項目へ移動します。
特定の文字で始まるリスト項目を移動するには、対応するキーを押します。
必要な項目の最初の数文字を入力してすばやく特定の項目に移動できます。
Enter キーまたは Space キーを使用して項目を選択します。

Note

igx-select は項目の単一選択のみをサポートします。

カスタムオーバーレイ設定

カスタム OverlaySettings を作成できます。テンプレートを以下のように定義します。

<igx-select [overlaySettings]="customOverlaySettings">
    <igx-select-item *ngFor="let item of items">
        {{item}}
    </igx-select-item>
</igx-select>

overlaySettings プロパティがカスタム設定にバインドされます。

クラスの内側に以下のようなコードがあります。

export class MyClass implements OnInit {
    @ViewChild(IgxSelectComponent)
    public select: IgxSelectComponent;
    public items: string[] = ['Orange', 'Apple', 'Banana', 'Mango', 'Tomato'];
    public customOverlaySettings: OverlaySettings;

    public ngOnInit(): void {
        const positionSettings: PositionSettings = {
            closeAnimation: scaleOutBottom,
            horizontalDirection: HorizontalAlignment.Right,
            horizontalStartPoint: HorizontalAlignment.Left,
            openAnimation: scaleInTop,
            verticalDirection: VerticalAlignment.Bottom,
            verticalStartPoint: VerticalAlignment.Bottom
        };
        this.customOverlaySettings = {
            target: this.select.inputGroup.element.nativeElement,
            positionStrategy: new ConnectedPositioningStrategy(
                positionSettings
            ),
            scrollStrategy: new AbsoluteScrollStrategy()
        };
    }
}

ConnectedPositioningStrategy に直接渡す PositionSettings オブジェクトを作成しましたが必須ではありません。ただし、カスタムポジショニングを定義するためにストラテジのデフォルト設定をオーバーライドします。

ngOnInit フックの内側にすべて設定できます。コンポーネントの生成時にテンプレートに自動的に反映します。

テンプレートを以下のようにカスタマイズされた OverlaySettings オブジェクトを IgxSelectComponent の open 関数に渡すこともできます。

<igx-select>
    <igx-select-item *ngFor="let item of items">
        {{item}}
    </igx-select-item>
</igx-select>

<button (click)="onClick($event)"></button>

クラスには以下があります。

export class MyClass implements OnInit {
    /* -- */
    private otherCustomOverlaySettings: OverlaySettings = {
        positionStrategy: new GlobalPositionStrategy(),
        scrollStrategy: new AbsoluteScrollStrategy()
    }
    onClick(event: MouseEvent): void {
        this.select.open(this.otherCustomOverlaySettings)
    }
    /* -- */
}

Note

テンプレートと同様に関数 open の引数としてカスタム設定を渡す場合、igx-select は関数 open で提供されるものを使用します。ただし、opening または opened などのインターナルイベントにバインドした場合は、igx-select はテンプレートの設定を使用します。

スタイル設定

各コンポーネントには独自のテーマがあります。

Select のスタイルを設定するには、それに含まれるコンポーネントのスタイルを設定します。この場合、input-group-theme と drop-down-theme の両方を使用する必要があります。

これら 2 つのコンポーネントのスタイル設定については、Input Group および Drop Down のスタイル設定セクションを参照してください。

Note

IgxSelectComponent は、IgxOverlay を使用して、igx-select-items リストコンテナーを保持および表示します。スタイルを適切にスコープするには、OverlaySetting.outlet を使用してください。詳細については、IgxOverlay スタイルガイドを確認してください。

API リファレンス

テーマの依存関係

その他のリソース

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

Angular Select の概要

Angular Select の例

Ignite UI で Angular Select を使用する方法

入力プロパティ

Note

選択項目のグループ化

ヘッダーとフッター

Angular Select のカスタム切り替えボタン

キーボード ナビゲーション

Note

カスタム オーバーレイ設定

Note

スタイル設定

Note

API リファレンス

テーマの依存関係

その他のリソース

テーマ設定

キーボードナビゲーション

カスタムオーバーレイ設定