Components List

Angular Radio & Radio Group (ラジオ & ラジオグループ) コンポーネントの概要

Radio Button (ラジオボタン)

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

Angular Radio & Radio Group の例

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 { IgxRadioModule } from "igniteui-angular";
import { RadioSample1Component } from "./radio-sample-1/radio-sample-1.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	RadioSample1Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxRadioModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

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

@Component({
    selector: 'app-radio-sample-1',
    styleUrls: ['./radio-sample-1.component.scss'],
    templateUrl: './radio-sample-1.component.html'
})
export class RadioSample1Component {
    public selected: string;
}
ts

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

:host {
    display: flex;
    flex-flow: column nowrap;
    padding: 16px;
}

igx-radio + igx-radio {
    margin-top: 16px;
}
scss

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

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

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

ng add igniteui-angular
cmd

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

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

// app.module.ts

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

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

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

// home.component.ts

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

@Component({
  selector: 'app-home',
  template: `
    <igx-radio-group>
      <igx-radio [(ngModel)]="selected" value="London">London</igx-radio>
      <igx-radio [(ngModel)]="selected" value="New York">New York</igx-radio>
      <igx-radio [(ngModel)]="selected" value="Tokyo">Tokyo</igx-radio>
      <igx-radio [(ngModel)]="selected" value="Sofia">Sofia</igx-radio>
    </igx-radio-group>
  `,
  styleUrls: ['home.component.scss'],
  standalone: true,
  imports: [IGX_RADIO_GROUP_DIRECTIVES, FormsModule],
  /* or imports: [IgxRadioComponent, IgxRadioGroupDirective, FormsModule] */
})
export class HomeComponent {
  public selected: any;
}
typescript

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

Angular Radio Button の使用

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

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

ラベル

labelPosition プロパティを使用して、ラジオコンポーネントのデフォルトのラベル位置を変更できます。before および after から選択できます。設定されていない場合、ラベルはラジオボタンの後に配置されます。

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

プロパティ

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

// radiogroup.component.ts
...
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;
typescript

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

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

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

結果は以下のようになります。

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 { IgxRadioModule } from "igniteui-angular";
import { RadioSample2Component } from "./radio-sample-2/radio-sample-2.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	RadioSample2Component
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxRadioModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

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

@Component({
    selector: 'app-radio-sample-2',
    styleUrls: ['./radio-sample-2.component.scss'],
    templateUrl: './radio-sample-2.component.html'
})
export class RadioSample2Component {
    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;
}
ts

<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>
        <h5>New York City</h5>
        New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean. At its core is
        Manhattan, a densely populated borough that’s among the world’s major commercial, financial and cultural
        centers.
    </div>
</div>
html

:host {
    display: flex;
    flex-flow: column nowrap;
    padding: 16px;
}

igx-radio + igx-radio {
    margin-top: 16px;
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 24px;
    max-width: 400px;
    height: 250px;
    padding: 16px;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, .24);
    transition: background-color .2s ease-out;
}


h5 {
    margin: 0 0 16px 0;
}
scss

スタイル設定

ラジオボタンのスタイル設定を始めるには、すべてのテーマ関数とコンポーネントミックスインが存在する index ファイルをインポートする必要があります。

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

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

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

$custom-radio-theme: radio-theme(
  $disabled-color: lightgray,
  $empty-color: #345779,
  $fill-color: #2dabe8,
  $fill-color-hover: #2dabe8,
  $fill-hover-border-color: #2dabe8,
);
scss

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

@include css-vars($custom-radio-theme);
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 { IgxRadioModule } from "igniteui-angular";
import { RadioStylingSampleComponent } from "./radio-styling-sample/radio-styling-sample.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	RadioStylingSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxRadioModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

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

@Component({
    selector: 'app-radio-sample-1',
    styleUrls: ['./radio-styling-sample.component.scss'],
    templateUrl: './radio-styling-sample.component.html'
})
export class RadioStylingSampleComponent {
    public selected: string;
}
ts

<igx-radio [(ngModel)]="selected" value="option1">New York</igx-radio>
<igx-radio [(ngModel)]="selected" value="option2">London</igx-radio>
<igx-radio [(ngModel)]="selected" value="option3">Sofia</igx-radio>
<igx-radio [(ngModel)]="selected" value="option4">Tokyo</igx-radio>
<igx-radio [(ngModel)]="selected" value="option5" [disabled] = "true">Singapore</igx-radio>
html

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

igx-radio + igx-radio {
    margin-top: 16px;
}

$custom-radio-theme: radio-theme(
    $disabled-color: lightgray,
    $empty-color:  #345779,
    $fill-color: #2dabe8,
    $fill-color-hover: #2dabe8,
    $fill-hover-border-color: #2dabe8

);

:host {
    display: flex;
    flex-flow: column nowrap;
    padding: 16px;


	@include css-vars($custom-radio-theme);
}

scss

Radio Group

Ignite UI for Angular Radio Group ディレクティブは、ラジオの子コンポーネントを制御できるグループ化コンテナーを提供し、テンプレート駆動型およびリアクティブ型のフォームをサポートします。

デモ

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 { 
	IgxButtonModule,
	IgxRadioModule,
	IgxInputGroupModule
 } from "igniteui-angular";
import { RadioGroupSampleComponent } from "./radio-group-sample/radio-group-sample.component";
import { ReactiveFormsModule } from "@angular/forms";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	RadioGroupSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxButtonModule,
	IgxRadioModule,
	IgxInputGroupModule,
	ReactiveFormsModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'app-radio-group-sample',
    styleUrls: ['./radio-group-sample.component.scss'],
    templateUrl: './radio-group-sample.component.html'
})
export class RadioGroupSampleComponent {
    public fruitsForm: FormGroup;
    public fruits = ['Apple', 'Mango', 'Banana', 'Orange'];
    public newModel: FruitData;
    public model: FruitData;

    constructor(private _formBuilder: FormBuilder) {
        // Simulate getting data from external service
        this.model = {
            favFruit: this.fruits[0],
            fullName: 'John Doe'
        };

        this.createForm();
    }

    public onSubmit() {
        if (this.fruitsForm.valid) {
            // simulate new model creation and send the new data to external service
            this.newModel = {
                favFruit: this.fruitsForm.value.favoriteFruit,
                fullName: this.fruitsForm.value.fullName
            };
        } else {
            this.newModel = null;
        }
    }

    public onReset() {
        this.fruitsForm.patchValue({
            favoriteFruit: this.model.favFruit,
            fullName: this.model.fullName
        });
        this.newModel = null;
    }

    private createForm() {
        this.fruitsForm = this._formBuilder.group({
            favoriteFruit: ['', Validators.required],
            fullName: ''
        });

        this.fruitsForm.setValue({
            favoriteFruit: this.model.favFruit,
            fullName: this.model.fullName
        });
    }
}

export class FruitData {
    public fullName: string;
    public favFruit: string;
}
ts

<div class="sample-wrapper">
    <label>Choose a fruit and submit your choice:</label>
    <form [formGroup]="fruitsForm" (ngSubmit)="onSubmit()">
        <igx-input-group>
            <input igxInput name="fullName" type="text" formControlName="fullName" required />
        </igx-input-group>

        <igx-radio-group name="fruitsRadioGroup" formControlName="favoriteFruit">
            <igx-radio class="radio-sample" *ngFor="let fruit of fruits" value="{{fruit}}">
                {{fruit}}
            </igx-radio>
        </igx-radio-group>
        <button igxButton="raised" igxRipple type="submit">Submit</button>
        <button igxButton="raised" igxRipple type="button" (click)="onReset()">Reset</button>
    </form>
    <label igxLabel *ngIf="newModel">{{newModel.fullName}} favourite fruit is {{newModel.favFruit}}.</label>
</div>
html

.sample-wrapper {
    margin: 16px;
}

form {
    max-width: 380px;
    margin-bottom: 16px;
}

igx-radio {
    margin: 8px;
}

.igx-button--raised {
    margin-right: 16px;
}
scss

使用方法

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

// app.module.ts
...
import { IgxRadioModule } from 'igniteui-angular';
// import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package

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

まず、igxRadioGroup を作成し、いくつかの igxRadio コンポーネントを追加します。

ラジオグループの name プロパティの設定は必須であることに注意してください。

<!--radio-group.component.html-->
<igx-radio-group name="fruitsRadioGroup">
  <igx-radio *ngFor="let fruit of fruits" value="{{fruit}}">
    {{fruit}}
  </igx-radio>
</igx-radio-group>
html

// radio-group.component.ts
public fruits = ["Apple", "Mango", "Banana", "Orange"];
typescript

配置

alignment 入力プロパティを使用して、ラジオグループ内の igxRadio コンポーネントの方向を変更します。horizontal および vertical から選択できます。ラジオグループのデフォルト配置は horizontal (水平) です。

//sample.component.ts
import { RadioGroupAlignment } from "igniteui-angular";
...
public alignment = RadioGroupAlignment.vertical;
...
typescript

<!-- sample.component.html -->
<igx-radio-group [alignment]="alignment">
  <igx-radio [(ngModel)]="selected" value="London">London</igx-radio>
  <igx-radio [(ngModel)]="selected" value="New York">New York</igx-radio>
  <igx-radio [(ngModel)]="selected" value="Tokyo">Tokyo</igx-radio>
  <igx-radio [(ngModel)]="selected" value="Sofia">Sofia</igx-radio>
</igx-radio-group>
html

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 { IgxRadioModule } from "igniteui-angular";
import { RadioGroupVerticalComponent } from "./radio-group-vertical/radio-group-vertical.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	RadioGroupSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxRadioModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component } from '@angular/core';
import { RadioGroupAlignment } from 'igniteui-angular';

@Component({
    selector: 'app-radio-group-vertical',
    styleUrls: ['./radio-group-vertical.component.scss'],
    templateUrl: './radio-group-vertical.component.html'
})
export class RadioGroupVerticalComponent {
    public alignment = RadioGroupAlignment.vertical;
    public selected: string;
}

ts

<article class="sample-column">
    <igx-radio-group [alignment]="alignment">
        <igx-radio [(ngModel)]="selected" value="London">London</igx-radio>
        <igx-radio [(ngModel)]="selected" value="New York">New York</igx-radio>
        <igx-radio [(ngModel)]="selected" value="Tokyo">Tokyo</igx-radio>
        <igx-radio [(ngModel)]="selected" value="Sofia">Sofia</igx-radio>
    </igx-radio-group>
</article>
html

igx-radio {
    margin-bottom: 8px;
}
scss

API リファレンス

テーマの依存関係

IgxRipple テーマ

その他のリソース

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

Angular Radio & Radio Group (ラジオ & ラジオ グループ) コンポーネントの概要

Radio Button (ラジオ ボタン)