Angular Material と Material Design Liteの比較

どちらもGoogleによるMaterial Designの実装だが、以下の点で多少異なる。 Angularと組み合わせて使うなら、Angular Material 。 マテリアルデザインだけ適用したい場合は、Material Design Liteが良いのかな。

依存関係

Angular Material は Angular, ngAnimate, ngAriaに依存、 Material Design Liteは依存関係なし

コンポーネント数

Angular Materialは30、Material Design Liteは15

ディレクティブ

Angular Materialは使える、Material Design Liteは使えない。 →Material Design Liteはクラスの記述が長くなる

<!-- Angular Material -->
<md-button>Get Started</md-button>

<!-- Material Design Lite -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
  Get Started
</button>

ファイルサイズ

Angular Materialの方がファイルサイズは大きい。

参考

Angular Material vs. Material Design Lite | Scotch