Angularプロジェクトに Material Designを導入する

2021年12月23日時点のWindows10での情報です。

Angularプロジェクトに、Material Designを導入してみたいと思います。

Angular Material 公式サイト
https://material.angular.io/

Angularプロジェクトは
Windows10(WSL2)＋DockerでAngularプロジェクトを作成する（まとめ）
で作成したプロジェクトを使用してます。

angular materialのインストール

angular materialをインストールします。

npx ng add @angular/material

ちなみに、angular materialのアンインストールはuninstallコマンドです。

npm uninstall @angular/material

The package @angular/material@13.1.1 will be installed and executed.
Would you like to proceed?
angular materialのバージョン13.1.1 がインストールされるがいいか？と聞かれます。
「y」を入力してインストールを実行します。

Choose a prebuilt theme name, or "custom" for a custom theme
どのテーマを選択するか聞かれますので、ここではとりあえず「indigo/Pink」を選択しました。
（※テーマを変更する方法は別記事で書きます）

Set up global Angular Material typography styles? (y/N)
angular materialのタイポグラフィ（文字に関するスタイル定義）をインストールするか聞かれますので、「y」を選択します。

Set up browser animations for Angular Material? (Y/n)
angular materialのアニメーションをインストールするか聞かれますので、「y」を選択します。

これでangular materialのインストールが終了しました。

angular materialのインストールで変更されたファイル

package.jsonファイル、package-lock.jsonファイルには、「"@angular/cdk": "^13.1.1"」「"@angular/material": "^13.1.1"」が追記されています。

angular.jsonファイルのstylesには、インストール時に選択したテーマ「indico-pink.css」が追記されています。

index.htmlファイルにも色々追記されています。

styles.scssファイルにも、スタイルが追記されています。

動作確認

とりあえず動作確認用のコンポーネントを作成します。
angular materialの住所入力フォームのひな型「address-form」で確認してみます。
generateコマンドで、コンポーネントを作成します。

ng generate @angular/material:address-form <コンポーネント名>

「my-address-form-component」というコンポーネントを作成しました。
ng generate @angular/material:address-form my-address-form-component

app.module.tsファイルに「my-address-form-component」コンポーネントが追加されています。

my-address-form-component.component.tsファイルのselectorを確認します。
selectorは「app-my-address-form-component」になっています。

@Component({
  selector: 'app-my-address-form-component',
  templateUrl: './my-address-form-component.component.html',
  styleUrls: ['./my-address-form-component.component.scss']
})

app.component.htmlに確認したselector「app-my-address-form-component」を追記します。

<app-my-address-form-component></app-my-address-form-component>

run serveでローカルサーバーを起動して、「http://localhost:4200」　で確認してみます。
angular-materialデザインが適用されています。

これでangular materialが適用されました。

今回適用したmaterialデザインのカスタマイズする方法は、コチラで記事にしています。
Angular Material Designをカスタマイズする