Angular Select (選択) コンポーネントの概要

Angular Select は、事前定義された値のリストから 1 つの値を選択するために使用されるフォーム コンポーネントです。Angular Select コンポーネントは、ネイティブ HTML select 要素と同じ機能を提供しますが、さらに多くのカスタマイズ オプションを提供します。これは IgxDropDownComponent に基づいており、テンプレート、仮想化、ドロップダウン リスト項目のカスタマイズなどのすべての機能をサポートしています。

Angular Select の例

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

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxSelectModule,
	IgxInputGroupModule
 } from "igniteui-angular";
import { SelectSample1Component } from "./select-sample-1/select-sample-1.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	SelectSample1Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxSelectModule,
	IgxInputGroupModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
    selector: 'app-select-sample-1',
    styleUrls: ['select-sample-1.component.scss'],
    templateUrl: 'select-sample-1.component.html'
})
export class SelectSample1Component {
    public items: string[] = ['Orange', 'Apple', 'Banana', 'Mango'];
}
tsコピー

<igx-select #select>
    <label igxLabel>Simple Select</label>
    <igx-select-item *ngFor="let item of items" [value]="item">
        {{item}}
    </igx-select-item>
</igx-select>
htmlコピー

igx-select {
    width: 230px;
    padding-top: 70px;
    padding-left: 40px;
}
scssコピー

Edit in: CodesandboxStackBlitz

このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Ignite UI for Angular Select を使用した作業の開始

Ignite UI for Angular Select コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular
cmd

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxSelectModule をインポートします。

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

あるいは、16.0.0 以降、IgxSelectComponent をスタンドアロンの依存関係としてインポートすることも、IGX_SELECT_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。

// home.component.ts

import { FormsModule } from '@angular/forms';
import { IGX_SELECT_DIRECTIVES } from 'igniteui-angular';
// import { IGX_SELECT_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-select [(ngModel)]="selected">
        <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>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_SELECT_DIRECTIVES, FormsModule]
    /* or imports: [IgxSelectComponent, IgxSelectItemComponent, IgxLabelDirective, FormsModule] */
})
export class HomeComponent {
    public selected: string;
}
typescript

Ignite UI for Angular Select モジュールまたはディレクティブをインポートしたので、igx-select コンポーネントの使用を開始できます。

Angular Select の使用

選択する項目のリストと共に 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>
html

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

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

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

デフォルトでは、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>
html

より複雑な項目テンプレートで 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>
html

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxSelectModule,
	IgxInputGroupModule,
	IgxIconModule
 } from "igniteui-angular";
import { SelectInputDirectivesComponent } from "./data-entries/select/select-input-directives/select-input-directives";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	SelectInputDirectivesComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxSelectModule,
	IgxInputGroupModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ViewChild } from '@angular/core';
import { IgxSelectComponent } from 'igniteui-angular';

@Component({
    selector: 'app-select-input-directives',
    styleUrls: ['select-input-directives.scss'],
    templateUrl: 'select-input-directives.html'
})

export class SelectInputDirectivesComponent {
    @ViewChild(IgxSelectComponent, { static: true })
    public igxSelect: IgxSelectComponent;
    public selected = '';

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

    public clearSelection(event: MouseEvent) {
        this.selected = '';
        // prevent the drop-down container from opening
        event.stopPropagation();
    }
}
tsコピー

<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>
htmlコピー

igx-select {
    width: 230px;
    padding-top: 70px;
    padding-left: 40px;
}

.bio-prefix {
    color: green;
    font-weight: 500;
    font-size: 1.5rem;
}
scssコピー

Edit in: CodesandboxStackBlitz

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' }
        ]
    }
];
typescript

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

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

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxSelectModule,
	IgxInputGroupModule,
	IgxDropDownModule,
	IgxIconModule
 } from "igniteui-angular";
import { SelectSample2Component } from "./select-sample-2/select-sample-2.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	SelectSample2Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxSelectModule,
	IgxInputGroupModule,
	IgxDropDownModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, ElementRef, ViewChild } from '@angular/core';
import { IgxSelectComponent } from 'igniteui-angular';

@Component({
    selector: 'app-select-sample-2',
    styleUrls: ['select-sample-2.component.scss'],
    templateUrl: 'select-sample-2.component.html'
})
export class SelectSample2Component {
    @ViewChild(IgxSelectComponent, { static: true })
    public select: IgxSelectComponent;

    public greengrocery: {
        label: string;
        items: { 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' }
            ]
        }
    ];

    constructor(public element: ElementRef) {
    }
}
tsコピー

<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>
htmlコピー

igx-select {
    width: 230px;
    padding-top: 70px;
    padding-left: 40px;
}

igx-select-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

:host ::ng-deep {
    .select__entry {
        span {
            display: flex;
            justify-content: space-between;
            width: 100%;
            padding-right: 12px;
        }
    }
}
scssコピー

Edit in: CodesandboxStackBlitz

ヘッダーとフッター

現在 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>
html

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxSelectModule,
	IgxInputGroupModule,
	IgxDropDownModule,
	IgxIconModule,
	IgxButtonGroupModule,
	IgxButtonModule
 } from "igniteui-angular";
import { SelectHeaderFooterComponent } from "./select-header-footer/select-header-footer.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	SelectHeaderFooterComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxSelectModule,
	IgxInputGroupModule,
	IgxDropDownModule,
	IgxIconModule,
	IgxButtonGroupModule,
	IgxButtonModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { ChangeDetectorRef, Component, ElementRef, OnInit } from '@angular/core';
@Component({
    selector: 'app-select-header-footer',
    styleUrls: ['select-header-footer.component.scss'],
    templateUrl: 'select-header-footer.component.html'
})
export class SelectHeaderFooterComponent implements OnInit {
    public flightCount: number;
    public trainCount: number;
    public boatCount: number;
    public selected: string;
    public fruits: { type: string; delivery: string }[];

    public fruitsDS: { type: string; delivery: string }[] = [
            { type: 'Apple', delivery: 'boat' },
            { type: 'Banana', delivery: 'flight'},
            { type: 'Blackberry', delivery: 'train'},
            { type: 'Blueberry', delivery: 'train'},
            { type: 'Coconut', delivery: 'flight'},
            { type: 'Cherry', delivery: 'boat'},
            { type: 'Grape', delivery: 'train'},
            { type: 'Japanese plum', delivery: 'flight'},
            { type: 'Pineapple', delivery: 'flight'},
            { type: 'Melon', delivery: 'flight'},
            { type: 'Orange', delivery: 'boat' },
            { type: 'Pear', delivery: 'train'},
            { type: 'Peach', delivery: 'boat'},
            { type: 'Pineapple', delivery: 'flight'},
            { type: 'Pomegranate', delivery: 'flight'},
            { type: 'Watermelon', delivery: 'train'}
        ];

    constructor(public cdr: ChangeDetectorRef, public element: ElementRef) {
    }

    public ngOnInit() {
        this.flightCount = this.fruitsDS.filter(items => items.delivery === 'flight').length;
        this.trainCount = this.fruitsDS.filter(items => items.delivery === 'train').length;
        this.boatCount = this.fruitsDS.filter(items => items.delivery === 'boat').length;
        this.fruits = this.fruitsDS;
    }

    public filter(target: EventTarget) {
        let value = (target as HTMLButtonElement).title;
        if (this.selected === value) {
            this.fruits = this.fruitsDS;
            this.selected = 'allData';
            this.cdr.detectChanges();
            return;
        }
        this.selected = value;
        this.fruits = this.fruitsDS.filter(fruit => fruit.delivery === value);
        this.cdr.detectChanges();
    }
}
tsコピー

<div class="header-footer-select-sample">
    <igx-select [overlaySettings]="{ outlet: element }">
        <label igxLabel>Pick your fruit</label>
        <igx-select-item *ngFor="let fruit of fruits" [value]="fruit.type" class="select__entry" [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)">
                    <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>
</div>
htmlコピー

@use '../../variables' as *;

.header-footer-select-sample {
    display: flex;
    height: 100%;
    align-items: center;
    margin-left: 48px;
}

:host ::ng-deep {
    .select__entry {
        display: flex;
        align-items: center;
        justify-content: space-between;

        span {
            display: flex;
            padding: 8px;
            justify-content: space-between;
            width: 100%;
        }
    }
}

igx-select {
    min-width: 320px;
}

.custom-select-header,
.custom-select-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
    background: color($color: 'gray', $variant: 100);
    igx-icon {
        &.important-icon {
            color: color($color: 'primary', $variant: 500);
        }
    }
}

.sample-template-icons,
.sample-template-icons__item {
    display: flex;
    align-items: center;
    igx-icon {
        margin-right: 8px;
    }
}

.sample-template-icons__item {
    margin-left: 32px;
}

.custom-select-header {
    height: 56px;
}

.custom-select-footer {
    height: 44px;
}

.sample-template-heading {
    font-size: 12px;
}

.sample-template-heading {
    color: color($color: 'secondary');
}

$custom-button-group: button-group-theme(
    $schema: $light-schema,
    $shadow: none,
    $border-radius: 0,
    $item-background: color($color: 'gray', $variant: 300),
    $item-text-color: color($color: 'gray', $variant: 700),
    $item-hover-background: color($color: 'gray', $variant: 400),
    $item-hover-text-color: color($color: 'gray', $variant: 700),
    $item-border-color: color($color:  'gray', $variant: 700),
    $item-selected-text-color: #fff,
    $item-selected-background: color($color: 'primary', $variant: 500),
    $item-selected-border-color: color($color: 'primary', $variant: 500),
    $item-selected-hover-background: color($color: 'primary', $variant: 600)
);

:host ::ng-deep {
    @include css-vars($custom-button-group);
}
scssコピー

Edit in: CodesandboxStackBlitz

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

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

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

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

また、ドラッグアンドドロップ App Builder™ を試して、特定のプロセスを自動化し、次の Angular アプリを構築する際の過度の手動コーディングの必要性を減らす方法を確認することもできます。

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

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

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

• 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()
        };
    }
}
typescript

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

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

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxSelectModule,
	IgxInputGroupModule
 } from "igniteui-angular";
import { SelectSample4Component } from "./select-sample-4/select-sample-4.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	SelectSample4Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxSelectModule,
	IgxInputGroupModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component, OnInit, ViewChild } from '@angular/core';
import {
    AbsoluteScrollStrategy, ConnectedPositioningStrategy,
    HorizontalAlignment, IgxSelectComponent, OverlaySettings,
    PositionSettings, scaleInTop, scaleOutBottom, VerticalAlignment
} from 'igniteui-angular';

@Component({
    selector: 'app-select-sample-4',
    styleUrls: ['select-sample-4.component.scss'],
    templateUrl: 'select-sample-4.component.html'
})
export class SelectSample4Component implements OnInit {
    @ViewChild(IgxSelectComponent, { static: true })
    public igxSelect: IgxSelectComponent;
    public items: string[] = ['Orange', 'Apple', 'Banana'];
    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.igxSelect.inputGroup.element.nativeElement,
            positionStrategy: new ConnectedPositioningStrategy(
                positionSettings
            ),
            scrollStrategy: new AbsoluteScrollStrategy()
        };
    }
}
tsコピー

<div class="select-wrapper">
    <igx-select [overlaySettings]="customOverlaySettings">
        <label igxLabel>Select An Item</label>
        <igx-select-item *ngFor="let item of items" [value]="item">
            {{item}}
        </igx-select-item>
    </igx-select>
</div>
    htmlコピー

.select-wrapper {
    display: flex;
    padding-top: 30px;
    padding-left: 20px;
}
scssコピー

Edit in: CodesandboxStackBlitz

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

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

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

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

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

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

スタイル設定

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

Select コンポーネントのスタイルを設定するには、それに含まれるコンポーネントのスタイルを設定します。この場合、input-group-theme と drop-down-theme を使用する必要があります。 Input Group と Drop Down のスタイル設定セクションを参照して、これら 2 つのコンポーネントのスタイル設定方法をより深く理解してください。

また、Select コンポーネントのボタンのスタイル設定にのみ使用される select-theme 関数もあります。
Select コンポーネントのボタンのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

最も簡単な方法は、select-theme を拡張する新しいテーマを作成し、デフォルト テーマのいくつかのパラメーターを受け取る方法です。

$custom-select-theme: select-theme(
  $toggle-button-background: #2b2b2b,
  $toggle-button-background-focus: #808080,
);
scss

最後には、カスタム ラジオ テーマをアプリケーションに渡します。

@include css-vars($custom-select-theme);
scss

EXAMPLE

API リファレンス

• IgxSelectComponent
• IgxSelectItemComponent
• IgxDropDownComponent
• IgxDropDownItemComponent
• OverlaySettings
• ConnectedPositioningStrategy
• GlobalPositionStrategy
• AbsoluteScrollStrategy
• PositionSettings

テーマの依存関係

• IgxDropDown テーマ
• IgxIcon テーマ
• IgxOverlay テーマ
• IgxInputGroup テーマ

その他のリソース

• NgModel
• ViewChild
• ngForOf

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)