【Angular】10分で分かるAngularMaterialのCheckboxの使い方

0
【Angular】10分で分かるAngularMaterialのCheckboxの使い方


原田です。今回はCheckboxについて解説を行います。

ソースコードはGitHubで公開しています。

AngularMaterialの環境構築については、こちらを参照してください。

【Angular】10分でわかるAngularMaterial環境構築



スポンサーリンク




サンプル

Materialのチェックボックスは、MdCheckboxModuleで提供されています。このモジュールをインポートすることでmd-checkboxタグを利用することができます。

md-checkboxには、幾つかの属性を設定することができる。

md-checkboxの属性

種別 属性 概要
Input align チェックボックスの位置。start,endで指定する。
Input checked チェック状態
Input indeterminate 初回押下状態
Output change checked変更イベント
Output indeterminateChange indeterminate変更イベント

ソースコード

ソースコード解説


1つ目は、同意するにチェックすることでボタンを押下できるようになるサンプルです。

2つ目は、チェックボックスの位置を指定するサンプルです。

3つ目は、チェックボックスが1度も押下されていないことを示すサンプルです。1回押下すると、indeterminateの値がtrueからfalseに咆哮されます。それ移行は、外部などから変更しない限り、trueになることはありません。

まとめ

Checkboxについて記載しました。


スポンサーリンク




コメントを残す