Angular Material Install（10分で理解）

マテリアルのインストール方法

下は、Angular　Material　の　Getting Started ブログサイトです。
詳細はここから参照できます。
https://material.angular.io/guide/getting-started

すでにNodeJs,@angular/cli　はインストール済みとして説明します。

今回の実施バージョン、環境は以下になります

Angular CLI: １１.０.５
Node: 15.5.1
OS: win32 x64
Visual Studio Code

ng new コマンドで、
Angularアプリケーションを作成する所から始めます。
ng new コマンドの実行時、Ｑuestionsが現れます。
今回はexerciseですので、最小限に設定します。
strict type　は、ｎを選択します。
routing　は、ｎを選択します。
スタイルは、cssを選択します。

 
  >ng new exe-app 
  >cd exe-app  
  
  

以前は@angular/animationのインストールが必要でしたが、
今は自動的にインストールされるようになっています。

2021年1月7日現在では、
Angular Material のインストールは大幅に改善されました。
materialのインストールだけでなくcdkのインストール、
その他の設定も自動的に実施されるようになりました。

　

 ng add コマンドを使い、Angular Materialをインストールします。

 >ng add @angular/material

  

色々質問されますが
custom theme 選択では、
Indigo/Pink（デフォルト）を選択します。
Set up Angular material typography styles :では yを入力します。
Set up browseranimations for Angular Material :では yを入力します。
入力が終わるとコマンドが実行されます。

このコマンドで、
package.json
angular.json
index.html
style.css
app.module.ts
がアップデートします。

package.jsonでは、@angular/materialと@angular/cdkが追加されます。 angular.jsonでは、"projects"の"styles"に、 "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",が追加されます。

index.htmlでは2つのlink が追加されます。
<link href="https://fonts.googleapis.com/css?...">
<link href="https://fonts.googleapis.com/icon?...">

style.cssでは、
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
が追加されます。

 app.module.tsでは、
   
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

 と、
  
 @NgModule({
 ...
 imports: [
   ...
    BrowserAnimationsModule],
    ...
   })
 が新しく追加されています。  
 以上でインストールは完了です。
   
  

まとめ
確認のため、自動で追加された箇所を記述しています。
以前これらはすべて手動で入力していました。
ng add @angular/material
このコマンドだけでよくなり、 煩わしくなくてメチャクチャ使いやすくなりました。
ぜひ試してください。