Checkbox

Ignite UI for Angular Checkbox コンポーネントは、特定の条件のバイナリ選択を可能にする選択コントロールです。ネイティブ ブラウザーのチェックボックスと同様に動作します。

Checkbox デモ

使用方法

チェックボックス コンポーネントは、選択/選択解除の状態の選択ができます。デフォルト スタイル設定はマテリアル デザイン ガイドラインの選択コントロールの仕様に基づきます。

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

// app.module.ts

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

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

簡易なチェックボックスを作成するには、コンポーネントのテンプレートで以下のコードを追加します。

<igx-checkbox [checked]="true">
    simple checkbox
</igx-checkbox>

以下は結果です:

Checkbox プロパティ

チェックボックス プロパティをデータにバインドし、上記のコードを拡張します。たとえば、description および done の 2 つのプロパティを持つタスク オブジェクトの配列がある場合では、チェックボックス コンポーネントの checked プロパティをその元となるタスク オブジェクトの done プロパティにバインドできます。同様に、value プロパティを description にバインドします。

オプションに change イベントをバインドし、イベント ハンドラー メソッドでカスタム ロジックを追加できます。

// tasks.component.ts
...
public tasks = [
  { done: true, description: 'Research' },
  { done: true, description: 'Implement' },
  { done: false, description: 'Test' },
];

...
statusChanged()
{
    // event handler logic
}

各タスクにチェックボックスを追加し、対応するプロパティ バインディングを設定してコンポーネント テンプレートを拡張します。

<!--tasks.component.html-->

<igx-checkbox *ngFor="let task of tasks" [checked]="task.done">
    {{ task.description }}
</igx-checkbox>

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

API リファレンス

その他のリソース

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