Angular4-materials
Angular 4-マテリアル
*Materials* は、プロジェクト用の多くの組み込みモジュールを提供します。 オートコンプリート、日付ピッカー、スライダー、メニュー、グリッド、ツールバーなどの機能は、Angular 4のマテリアルで使用できます。
マテリアルを使用するには、パッケージをインポートする必要があります。 Angular 2にも上記のすべての機能がありますが、@ angular/coreモジュールの一部として利用できます。 Angular 4は、個別のモジュール*@angular/materials.*を作成しました。 これにより、ユーザーは必要な材料をインポートできます。
マテリアルの使用を開始するには、マテリアルとcdkの2つのパッケージをインストールする必要があります。 マテリアルコンポーネントは、高度な機能のためにアニメーションモジュールに依存しているため、同じためのアニメーションパッケージ、つまり@ angular/animationsが必要です。 パッケージは前の章ですでに更新されています。
npm install --save @angular/material @angular/cdk
package.jsonを見てみましょう。 @ angular/material および @ angular/cdk がインストールされます。
{
"name": "angularstart",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^4.0.0",
"@angular/cdk": "^2.0.0-beta.8",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/material": "^2.0.0-beta.8",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/cli": "1.2.0",
"@angular/compiler-cli": "^4.0.0",
"@angular/language-service": "^4.0.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}
}
マテリアルを操作するためにインストールされるパッケージを強調表示しました。
以下に示すように、親モジュール- app.module.ts にモジュールをインポートします。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MdButtonModule,
MdMenuModule,
FormsModule,
MdSidenavModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
上記のファイルでは、@ angular/materialsから次のモジュールをインポートしました。
import { MdButtonModule, MdMenuModule, MdSidenavModule } from '@angular/material';
そして、以下に示すように、インポート配列でも同じことが使用されます-
imports: [
BrowserModule,
BrowserAnimationsModule,
MdButtonModule,
MdMenuModule,
FormsModule,
MdSidenavModule
]
*app.component.ts* は以下に示すとおりです-
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.componentl',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myData: Array<any>;
constructor() {}
}
*app.componentl* にマテリアルを追加してみましょう。
<button md-button [mdMenuTriggerFor]="menu">Menu</button>
<md-menu #menu="mdMenu">
<button md-menu-item>
File
</button>
<button md-menu-item>
Save As
</button>
</md-menu>
<md-sidenav-container class="example-container">
<md-sidenav #sidenav class="example-sidenav">
Angular 4
</md-sidenav>
<div class="example-sidenav-content">
<button type="button" md-button (click)="sidenav.open()">
Open sidenav
</button>
</div>
</md-sidenav-container>
上記のファイルに、MenuとSideNavを追加しました。
Menu
メニューを追加するには、 <md-menu> </md-menu> が使用されます。 ファイル*および*名前を付けて保存*アイテムが *md-menu の下のボタンに追加されます。 メニュー*が追加されたメインボタンがあります。 同じ参照は、 *[mdMenuTriggerFor] =” menu” を使用し、<md-menu> の#でメニューを使用することにより、<md-menu>に与えられます。
sidenavを追加するには、 <md-sidenav-container> </md-sidenav-container> が必要です。 <md-sidenav> </md-sidenav> は、コンテナに子として追加されます。 *(click)=” sidenav.open()” *を使用してsidenavをトリガーする別のdivが追加されています。 以下は、ブラウザのメニューとサイドナブの表示です-
*opensidenav* をクリックすると、以下に示すようにサイドバーが表示されます-
メニューをクリックすると、以下に示すように、*ファイル*と*名前を付けて保存*という2つのアイテムが表示されます-
材料を使用して日付ピッカーを追加しましょう。 日付ピッカーを追加するには、日付ピッカーを表示するために必要なモジュールをインポートする必要があります。
*app.module.ts* では、datepickerについて以下に示すように、次のモジュールをインポートしました。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdDatepickerModule, MdInputModule, MdNativeDateModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
MdDatepickerModule,
MdInputModule,
MdNativeDateModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ここでは、* MdDatepickerModule、MdInputModule、および *MdNativeDateModule などのモジュールをインポートしました。
さて、 app.component.ts は次のようになります-
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.componentl',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myData: Array<any>;
constructor() {}
}
*app.componentl* は以下のとおりです-
<md-input-container>
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>
これは、ブラウザで日付ピッカーが表示される方法です-