Radio & Radio Group

Radio Button

Ignite UI for Angular Radio Button コンポーネントを使用すると、隣に表示されるオプションのセットから単一のオプションを選択する機能をサポートします。

Radio Button デモ

Radio Button の使用

ラジオ ボタン コンポーネントはオプションの単一選択を可能にします。デフォルト スタイル設定はマテリアル デザイン ガイドラインの選択コントロールの仕様に基づきます。

Ignite UI for Angular Radio を初期化する前に IgxRadioModuleapp.module.ts ファイルにインポートします。

// app.module.ts

...
import { IgxRadioModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxRadioModule],
    ...
})
export class AppModule {
    public selected: any;
}

ラジオ ボタンの作成は、コンポーネントのテンプレートで以下のコードを追加します。

<igx-radio [(ngModel)]="selected" value="option1">Option 1</igx-radio>
<igx-radio [(ngModel)]="selected" value="option2">Option 2</igx-radio>

以下は結果です:

Radio Button プロパティ

ラジオ ボタンをグループに追加します。上記のコードにラジオ ボタンを 4 つ追加し、各ボタンに特定の背景色を適用します。更に含まれる div 要素の backgroundColor プロパティをコンポーネントの selectedColor プロパティにバインドし、selectedColor に NgModel ディレクティブによって双方向バインディングを設定します。これによりユーザーが他のラジオ ボタン (色) を選択したときに値が更新されます。

// radiogroup.component.ts
...
public title = "Select Background";

public colors = [{
    hex: "#f06a2f",
    name: "Carrot"
}, {
    hex: "#ff134a",
    name: "Watermelon"
}, {
    hex: "#7bc96f",
    name: "Grass"
},
{
    hex: "transparent",
    name: "No color"
}];

public selectedColor: string = this.colors[3].hex;
<!--radiogroup.component.html-->

<igx-radio *ngFor="let color of colors" 
    name="color" 
    [value]="color.hex" 
    [(ngModel)]="selectedColor">
    {{color.name}}
</igx-radio>

<div class="box" [style.background-color]="selectedColor"></div>

双方向バインディングで ngModel ディレクティブを使用する前に、FormsModule をインポートして NgModule の imports リストに追加する必要があります。

以上を実行すると以下のような結果になります。

Radio Group

Ignite UI for Angular Radio Group ディレクティブは、子 igxRadio コンポーネントをより詳細に制御ができ、テンプレート主導やリアクティブ フォームをサポートするグルーピング コンテナーを提供します。

Radio Group デモ

Radio Group の使用

Radio Group ディレクティブが NgModule としてエクスポートされるため、アプリケーションで app.module.ts ファイルの IgxRadioModule をインポートする必要があります。

// app.module.ts
...
import { IgxRadioModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxRadioModule],
    ...
})

はじめに igxRadioGroup を作成して igxRadio コンポーネントを追加します。

igx-radio-group name プロパティの設定は必須であることに注意してください。

<!--radio-group.component.html-->
<igx-radio-group name="fruitsRadioGroup">
    <igx-radio class="radio-sample" *ngFor="let fruit of fruits" value="{{fruit}}">
        {{fruit}}
    </igx-radio>
</igx-radio-group>
// radio-group.component.ts
public fruits = ["Apple", "Mango", "Banana", "Orange"];

API リファレンス

その他のリソース

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