第1回 Angular Material 徹底解説！- 環境構築

キジ(@kiji)です｡みなさんは､Webアプリケーション開発のときにどのフレームワークを使っていますか?
React､Vue､最近ではFlutterも候補にあがるでしょうか｡

私はというと､ずっとAngularを使ってきました｡Angularに慣れれば､コマンド1つでコンポーネント作成などができるため､非常に開発効率が上がります｡

今回はマテリアデザイン開発が簡単にできる､Angular Materialについて､解説していきます｡

環境
ツールのインストール
プロジェクト作成
テスト実行
おすすめプラグイン
参考文献

環境

$ npm -v
7.21.1
$ node -v
16.9.1

ツールのインストール

Angularのプロジェクトを作成するのに必要なツールをインストールします｡

$ npm install -g @angular/cli

プロジェクト作成

Angularのプロジェクトを作成します｡2つ質問がありますが､お好きなものを選択してください｡
渡しの場合は､以下のように選択しています｡

$ ng new [project名]
? Would you like to add Angular routing? (y/N)                                          y
? Which stylesheet format would you like to use? (Use arrow keys)        SCSS

プロジェクトが作成されたら､以下のモジュールをインストールします｡

$ ng add @angular/material

Angular Materialでは､書くコンポーネントごとに､モジュールを読み込む必要があります｡
今回は､サンプルにある｢Slider｣を使えるように修正します｡

$ ng g component sample/slider

<app-slider></app-slider>

view raw app.component.html hosted with ❤ by GitHub

	import { NgModule } from '@angular/core';
	import { BrowserModule } from '@angular/platform-browser';

	import { AppRoutingModule } from './app-routing.module';
	import { AppComponent } from './app.component';
	import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

	import { MatSliderModule } from '@angular/material/slider';
	import { FormsModule } from '@angular/forms';
	import { SliderComponent } from './sample/slider/slider.component'; // 追加

	@NgModule({
	declarations: [
	AppComponent,
	SliderComponent // 追加
	],
	imports: [
	BrowserModule,
	AppRoutingModule,
	BrowserAnimationsModule,
	FormsModule, // 追加
	MatSliderModule // 追加
	],
	providers: [],
	bootstrap: [AppComponent]
	})
	export class AppModule { }

view raw app.module.ts hosted with ❤ by GitHub

	<mat-slider min="1" max="100" step="1" [(ngModel)]="value"></mat-slider>
	<p>{{value}}</p>

view raw slider.component.html hosted with ❤ by GitHub

	import { Component, OnInit } from '@angular/core';

	@Component({
	selector: 'app-slider',
	templateUrl: './slider.component.html',
	styleUrls: ['./slider.component.scss']
	})
	export class SliderComponent implements OnInit {
	value = 10;
	constructor() { }

	ngOnInit(): void {
	}
	}