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

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


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

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

AngularMaterialの環境構築については、こちらを参照してください。
http://issier.com/archives/17#



スポンサーリンク




サンプル

Selectを利用するには、MdSelectModuleをインポートする必要があります。

ソースコード


https://gist.github.com/shinji5761/62f79533b66461049a60cc397f2abf5a

ソースコード解説


Selectは、md-selectとmd-optionを提供しています。基本的な使い方は、HTMLのselectタグと変わりません。

md-selectでは、以下のパラメータを設定することができる。

md-selectのパラメータ

種類 パラメータ 概要
Input placeholder Selectのキーワード
multiple 複数選択を可能とする
Output onOpen Selectが開いたときのイベントハンドラ
onClose Selectが閉じたときのイベントハンドラ
change Selectの選択を変更したときのイベントハンドラ

また、md-selectにngModelを設定することで、Selectで選択した値(md-optionのvalue)と同期することができる。

まとめ

Selectについて解説した。


スポンサーリンク




コメントを残す