前回、CSSフレームワークをどうやって当てるかをやっていきますと言ってましたが、どうやらAngular2ComponentsというMaterialDesignを使ったものがあるようでした。 CodeLabにまとまったチュートリアルがあったのでやってみました。

Code Lab: AngularDart Components

既にAngularDartで作られているプログラムをAngular2Componentsを当ててみよう、というやつです。 英語ですが、before afterがあるので、とりあえず進められます。 4ステップまであって、まぁ時間は多少かかりますが、なんとかなります。

Angular2Componentsは、MaterialDesignLiteのパーツをそれぞれのdirectiveとして定義してあるもの、のようです。 directiveとして定義してあるので、html側に書く場合は<material-radio>みたいに独自のタグとして記述します。 こう書けるので、MaterialDesignLiteの割と情報的な書き方をしなくてもシンプルに書けるのはよさそうです（ただし、独自タグで使える属性を覚えておかないといけないのが面倒…）。

また、まだMDLをフルサポートしてないという点に注意ですね（現時点でバージョンが0.2.2だし）

あと、チュートリアルの最後が最新版のを使ってると動かないという罠がありました…。タブパネルが表示されません。 - angular2 2.1.1 - angular2_components 0.2.0 に固定したら動きました。

自分のコードが悪いんかなーと思って、4-finalの完成しているコードを見てみて、pub updateを実行した後にpub serveをしたら、同じくタブが表示されませんでした。

ちょっとハマって疲れてしまったけれど、直せそうだったら直してPRしてみるかなー…。