[Ignite UI for Angular 11.1 新機能] IgxRadioGroup アイテムを並べる方向を制御する

Ignite UI for Angular 11.1.7 バージョン時点での情報に基づいています。

Ignite UI for Angular 11.1 では、IgxRadioGroup のアイテムを、縦方向・横方向に並べる alignment プロパティが追加されました。下記、利用例です。

app.component.html

<button (click)="onClickVertical()">縦並び</button>
<button (click)="onClickHorizontal()">横並び</button>
<igx-radio-group [alignment]="alignment">
  <igx-radio value="London">London</igx-radio>
  <igx-radio value="New York">New York</igx-radio>
  <igx-radio value="Tokyo">Tokyo</igx-radio>
  <igx-radio value="Sofia">Sofia</igx-radio>
</igx-radio-group>

app.component.ts

export class AppComponent {
  title = 'igx-radio-group-alignment';
  alignment;

  onClickVertical() {
    this.alignment = RadioGroupAlignment.vertical;
  }

  onClickHorizontal() {
    this.alignment = RadioGroupAlignment.horizontal;
  }
}

縦並びの場合

横並びの場合

alignment プロパティ：https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxradiogroupdirective.html#alignment