【Angular】10分でわかるAngularMaterial環境構築

0
【Angular】10分でわかるAngularMaterial環境構築


原田です。今回はAngularMaterialの環境構築について記載します。

本記事は、公式のGetstartの解説となります。



スポンサーリンク




AngularMaterialの導入

angular-cliのインストール

angular-cliは、その名の通りAngualrのプロジェクトを作成したりするコマンドラインインターフェースです。
Materialは、angular-cliによって作成されるプロジェクトをベースに作成していきます。

angular-cliは、npmでインストールできます。

$ npm install -g @angular/cli

インストールが完了したら、ngコマンドでプロジェクトの作成を行います。

$ ng new プロジェクト名

materialのインストール

作成したプロジェクトにMaterialをインストールします。

$ cd プロジェクト名
$ npm install --save @angular/material @angular/cdk
$ npm install --save angular/material2-builds angular/cdk-builds

インストールが終わったら、テーマを設定します。Materialには、以下の4つのテーマがあります。

  • deeppurple-amber.css
  • indigo-pink.css
  • pink-bluegrey.css
  • purple-green.css

テーマは、プロジェクト内にあるstyle.cssに以下を追記する。

style.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

animationsのインストール

Materialで提供されるコンポーネントのアニメーションは、別モジュールが使われています。

以下のモジュールをインストール、設定します。

$ npm install --save @angular/animations	
app.module.ts

	import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
	・
	・
	・
	@NgModule({
	imports: [
		BrowserAnimationsModule
	・
	・
	・								

hammerjsのインストール

アニメーション同様、スワイプなどのジェスチャー操作を別モジュールを使って実装されています。

以下のモジュールをインストール、設定します。

$ npm install --save hammerjs
app.module.ts

	import 'hammerjs';

iconの設定

Materialでは、デザインに合うアイコンをオプションとして提供しています。アイコンを利用するには、以下の記述を追記します。

index.html

	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

以上で、設定は終わりです。

サンプル

1つサンプルを用意しましたので紹介します。

サンプル

Materialのコンポーネントを使うには、モジュールをインポートする必要があります。

ボタンであればMdButtonModule、チェックボックスであればMdCheckboxModuleをインポートします。

また、自分の環境だけなのかFormModuleをインポートしないとエラーとなりました。ので、同様にインポートします。

app.module.ts

	import {MdButtonModule, MdCheckboxModule} from '@angular/material';
	import { FormsModule } from '@angular/forms';
	・
	・
	・
	@NgModule({
	imports: [
		MdButtonModule,
		MdCheckboxModule,
		FormsModule,
	・
	・
	・								
home.component.html

<md-checkbox [(ngModel)]="city.tokyo">東京</md-checkbox>
<md-checkbox [(ngModel)]="city.osaka">大阪</md-checkbox>
<button md-raised-button (click)="onButtonClick()">Flat button</button>
<i class="material-icons md-24">done</i>
home.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
	selector: 'app-home',
	templateUrl: './home.component.html',
	styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
	private city = {
		'tokyo' : true,
		'osaka' : false
	}
	
	ngOnInit() {}

	private onButtonClick() : void {
		alert('onButtonClick!!');
	}
}

解説回ではないため詳しくはしませんが、モジュールをインポートすることでmd-raised-buttonやmd-checkboxが利用できる様になります。

また、アイコンはclassで大きさなど指定し、タグの間に該当する文字列を入力することで表示される。

まとめ

Materialの環境構築について記載していきました。今後は、コンポーネントごとの解説をやろうと思います。


スポンサーリンク




コメントを残す