Switch

Ignite UI for Angular Switch コンポーネントは iOS の switch コンポーネントと同様に動作するバイナリ選択コンポーネントです。

Switch デモ

使用方法

中核となるスイッチ コンポーネントはオン/オフ状態の切り替えが可能です。デフォルト スタイル設定はマテリアル デザイン ガイドラインの選択コントロールの仕様に基づきます。

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

// app.module.ts

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

@NgModule({
    ...
    imports: [..., IgxSwitchModule],
    ...
})
export class AppModule {}

シンプルなスイッチを作成するには、コンポーネントのテンプレートで以下のコードを追加します。

<igx-switch [checked]="true">
    Simple switch
</igx-switch>

以下は結果です。

Switch プロパティ

上記のコードを拡張するには、スイッチ プロパティをデータにバインドします。name および state の 2 つのプロパティを持つ設定オブジェクトの配列があるとしましょう。スイッチ コンポーネントの checked プロパティを基本の設定オブジェクトの state プロパティにバインドします。同じように、value プロパティを name にバインドします。

// toggle.component.ts
...
  public settings = [
    { name: 'WiFi', state: false},
    { name: 'Bluetooth', state: true},
    { name: 'Device visibility', state: false}
  ];

コンポーネント テンプレートに各設定のためのスイッチを追加し、相対するプロパティにバインドします。

<!--toggle.component.html-->

<igx-switch *ngFor="let setting of settings" [checked]="setting.state">
   {{ setting.name }}
</igx-switch>

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

    

API リファレンス

その他のリソース

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