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

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


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

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



スポンサーリンク




AngularMaterialの導入

angular-cliのインストール

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

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

<br />
$ npm install -g @angular/cli<br />

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

<br />
$ ng new プロジェクト名<br />

materialのインストール

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

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

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

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

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

style.css
<br />
@import &quot;~@angular/material/prebuilt-themes/indigo-pink.css&quot;;<br />

animationsのインストール

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

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

<br />
$ npm install --save @angular/animations<br />

app.module.ts
<br />
	import {BrowserAnimationsModule} from '@angular/platform-browser/animations';<br />
	・<br />
	・<br />
	・<br />
	@NgModule({<br />
	imports: [<br />
		BrowserAnimationsModule<br />
	・<br />
	・<br />
	・<br />

hammerjsのインストール

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

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

<br />
$ npm install --save hammerjs<br />

app.module.ts
<br />
	import 'hammerjs';<br />

iconの設定

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

index.html
<br />
	&lt;link href=&quot;https://fonts.googleapis.com/icon?family=Material+Icons&quot; rel=&quot;stylesheet&quot;&gt;<br />

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

サンプル

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

サンプル

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

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

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

app.module.ts
<br />
	import {MdButtonModule, MdCheckboxModule} from '@angular/material';<br />
	import { FormsModule } from '@angular/forms';<br />
	・<br />
	・<br />
	・<br />
	@NgModule({<br />
	imports: [<br />
		MdButtonModule,<br />
		MdCheckboxModule,<br />
		FormsModule,<br />
	・<br />
	・<br />
	・<br />
home.component.html
<br />
&lt;md-checkbox [(ngModel)]=&quot;city.tokyo&quot;&gt;東京&lt;/md-checkbox&gt;<br />
&lt;md-checkbox [(ngModel)]=&quot;city.osaka&quot;&gt;大阪&lt;/md-checkbox&gt;<br />
&lt;button md-raised-button (click)=&quot;onButtonClick()&quot;&gt;Flat button&lt;/button&gt;<br />
&lt;i class=&quot;material-icons md-24&quot;&gt;done&lt;/i&gt;<br />
home.component.ts
<br />
import { Component, OnInit } from '@angular/core';<br />
@Component({<br />
	selector: 'app-home',<br />
	templateUrl: './home.component.html',<br />
	styleUrls: ['./home.component.css']<br />
})<br />
export class HomeComponent implements OnInit {<br />
	private city = {<br />
		'tokyo' : true,<br />
		'osaka' : false<br />
	}</p>
<p>	ngOnInit() {}</p>
<p>	private onButtonClick() : void {<br />
		alert('onButtonClick!!');<br />
	}<br />
}<br />

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

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

まとめ

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


スポンサーリンク




コメントを残す