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

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


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

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

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

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



スポンサーリンク




サンプル

Radiobuttonを利用するには、MdRadioModuleをインポートする必要があります。
インポートすることで、md-radio-groupmd-radio-buttonを利用できるようになります。

ソースコード

ソースコード解説


Radiobuttonは、md-radio-groupでグループを作り、そのタグの中に、md-radio-buttonでラジオボタンを作成します。

md-radio-group、md-radio-buttonともに、いくつかのパラメータがあります。

md-radio-buttonのパラメータ

種類 パラメータ 概要
Input checked ラジオボタンがチェック状態。
value ラジオボタンの値。
align ラジオボタンの位置。
disabled ラジオボタンの活性状態。
Output change ラジオボタン変更イベント。
md-radio-group

種類 パラメータ 概要
Input align ラジオボタンの位置。
disabled ラジオボタンの活性状態。
Output change ラジオボタン変更イベント。

md-radio-buttonでは、個別で設定することができる。md-radio-groupでは、グループ内にあるボタン全てに設定値が反映される。

まとめ

ラジオボタンについて解説した。


スポンサーリンク




コメントを残す