Angular -Material-

2018年01月15日
CATEGORY- 1. 技術力｛技術情報｝

今回は前回の続きで、「Angular Material」を使ってみたいと思います。

■Angular Material
https://material.angular.io/

■Install Angular Material
まず、npmを使ってAngular MaterialとCDKをインストールします。

npm install --save @angular/material @angular/cdk

インストールが終わったら、styles.cssにThemeをインポートします。

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

次に、いくつかのMaterialコンポーネントで必要になるモジュールをインストールします。

npm install --save @angular/animations

インストールが終わったら、下記のようにインポートします。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; // add

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
	FormsModule,
	BrowserAnimationsModule // add
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

※FormsModuleも必要なのでインポートしておきます。

コンポーネントを使うには個別にモジュールをインポートしなければならないので「Checkbox」を使いたい場合は、

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCheckboxModule } from '@angular/material/checkbox'; // add

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
	FormsModule ,
	BrowserAnimationsModule,
	MatCheckboxModule // add
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

あとは、Exsampleを参考に実装します。
https://material.angular.io/components/checkbox/examples

Angularは半年に一回メジャーアップデートされるとのことで、実際今回もアップデートしましたが、他のコンポーネントとの依存関係で問題が出てきたりして少し時間がかかりました…

今後、アップデートについていくの結構大変そうな気がします。

2018年01月15日
CATEGORY- 1. 技術力｛技術情報｝

Angular -Material-

CATEGORY

LATEST ENTRY

秀長に学ぶ(3)

秀長に学ぶ(2)

秀長に学ぶ(1)

ダム式経営について

経営の安定について

TAG