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

Angularとセットで使うことが多いmaterial UI をインストールしてみた。

そもそも標準のような機能なので、特に難しいことなく、インストールできた。

目次

独断と偏見で言わせてもらうと、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つの質問。

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

次に読むおすすめ記事

Angularをバージョン指定でインストールする方法は?

Angular Material UI でカスタムカラーを設定する。

Angularでwebアプリを作成する時「コンポーネントのベストプラクティス」

Angularでコンポーネントを再レンダリングする

AngularでObjectを返すカスタムPipeを作ったがValueへのアクセス方法がわかなかったので調べてみた

この記事に対するコメント

お気軽にコメントを下さい

メールアドレスが公開されることはありません。 が付いている欄は必須項目です