Angular 4-재료
Materials프로젝트를위한 많은 내장 모듈을 제공합니다. 자동 완성, 날짜 선택기, 슬라이더, 메뉴, 그리드 및 도구 모음과 같은 기능은 Angular 4의 재료와 함께 사용할 수 있습니다.
재료를 사용하려면 패키지를 가져와야합니다. Angular 2에는 위의 모든 기능이 있지만 @ angular / core 모듈의 일부로 사용할 수 있습니다. Angular 4에는 별도의 모듈이 있습니다.@angular/materials.. 이것은 사용자가 필요한 자료를 가져 오는 데 도움이됩니다.
재료 사용을 시작하려면 재료와 cdk의 두 가지 패키지를 설치해야합니다. 머티리얼 컴포넌트는 고급 기능을위한 애니메이션 모듈에 의존하므로 동일한 애니메이션 패키지 (예 : @ 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 배열에서도 동일하게 사용됩니다.
imports: [
BrowserModule,
BrowserAnimationsModule,
MdButtonModule,
MdMenuModule,
FormsModule,
MdSidenavModule
]
그만큼 app.component.ts 다음과 같습니다-
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myData: Array<any>;
constructor() {}
}
이제 재료를 추가하겠습니다. app.component.html.
<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를 추가했습니다.
메뉴
메뉴를 추가하려면 <md-menu></md-menu>사용. 그만큼file 과 Save As 항목은 아래의 버튼에 추가됩니다. md-menu. 추가 된 메인 버튼이 있습니다Menu. 동일한 참조는 다음을 사용하여 <md-menu>에 제공됩니다.[mdMenuTriggerFor]=”menu” 메뉴를 사용하여 # in <md-menu>.
SideNav
sidenav를 추가하려면 <md-sidenav-container></md-sidenav-container>. <md-sidenav></md-sidenav>컨테이너에 자식으로 추가됩니다. 다른 div가 추가되어(click)=”sidenav.open()”. 다음은 브라우저의 메뉴 및 사이드 탐색 표시입니다.
클릭하면 opensidenav, 그것은 아래와 같이 사이드 바를 보여줍니다-
메뉴를 클릭하면 두 가지 항목이 표시됩니다. File 과 Save As 아래와 같이-
이제 재료를 사용하여 날짜 선택기를 추가해 보겠습니다. datepicker를 추가하려면 datepicker를 표시하는 데 필요한 모듈을 가져와야합니다.
에 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.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myData: Array<any>;
constructor() {}
}
그만큼 app.component.html 다음과 같습니다-
<md-input-container>
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>
이것이 datepicker가 브라우저에 표시되는 방법입니다.