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

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


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

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

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

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



スポンサーリンク




サンプル

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

ソースコード

ソースコード解説


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について解説した。


スポンサーリンク




コメントを残す