angular5로 재질 디자인으로 이전

Question

나는 angular4 앱을 부트 스트랩으로 개발 중입니다. 난 그냥 angular5로 이동하는 대신 주요-NG의 NG-bootrap 검도 - UI 등의 부품에 대한 재질 디자인을 사용하는 경우 ... 감사 콘솔에서

Answer 1

없는 경우 궁금 :

ng new pjt 
cd pjt 

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

앱/모듈/material.module.ts 파일을 만들고 다음과 같습니다

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { MatButtonModule } from '@angular/material'; 

@NgModule({ 
imports: [MatButtonModule], 
exports: [MatButtonModule], 
}) 

export class MaterialModule { } 

참고 각 요소 매트 ... 모듈을 가져 오기, 수입에 분리 위의 파일 쉼표에 추가 할 필요를 사용하려는 라인을 수출합니다.

업데이트 응용 프로그램/

을 포함하는 콘솔에서

npm install hammerjs --save 

업데이트 main.ts을

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

를 포함

import { BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import { MaterialModule } from './modules/material.module'; 
... 
imports: [ 
... 
BrowserAnimationsModule, 
MaterialModule 
], 

업데이트 styles.scss를 포함 app.modules.ts

import 'hammerjs'; 

는 업데이트 된 index.html 콘솔에서

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

을 포함

ng serve 

그런 다음 재료 요소 당신의 구성 요소에 포함 시작할 수 있습니다, 예를 들어, <button mat-button>Some Btn<button> ... 요소에 대해 material.angular.io을 확인하십시오 ...

자세한 내용은 https://coursetro.com/posts/code/113/How-to-Build-an-Angular-5-Material-App을 확인하십시오.