# Angularとセットで使うことが多いmaterial UI をインストールする

3 min read
Table of Contents

独断と偏見で言わせてもらうと、Angularはそれだけだと使いこなすことができない。

AngularはAngular側が用意してくれているモジュールをインストールして活用することで、簡単にWeb アプリを作成できるようになる。

が、そのモジュールなしで使いこなすことは難しい。

その筆頭がmaterial UIである。

material UIとは?

material UIはこちら

要はよく使うパーツを用意されたモジュールをインストールするだけで使えるようになるというもの。

大変便利なのだが、決められたパーツなのでカスタマイズが絶妙に面倒くさいというデメリットもある。

とは言え、面倒な処理はやってくれるので、非常に重宝する。

いざ、インストール

それでは実際にインストールしてみる。

$ ng add @angular/material

上記コマンドを実行後、インストールが進行し、いくつか質問されるので、下記のように回答する。

ℹ Using package manager: npm
✔ Found compatible package version: @angular/material@12.2.13.
✔ Package information loaded.
The package @angular/material@12.2.13 will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
? Choose a prebuilt theme name, or "custom" for a custom theme: Custom
? Set up global Angular Material typography styles? No
? Set up browser animations for Angular Material? Yes

これで無事にインストールが完了した。

質問に関しては、

  1. 用意されたパレットテーマ、カスタムテーマどちらを使用しますか?
  2. タイポグラフィにグローバルなCSSを当てますか?
  3. Angular Material のアニメーション機能を使用しますか?

という3つの質問。

少しでもカスタマイズしやすくするために、上記回答にした。

My avatar

Thanks for reading my blog post! Feel free to check out my other posts or contact me via the social links in the footer.


More Posts

Comments