安装 Material UI 方法:
Material 官网:https://material.angular.io
step 1:
npm install --save @angular/material @angular/cdk
step 2:
npm install --save @angular/animations
step 3:
angular.cli
"../node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
or
style.css
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
step 4:
index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
step 5:
app.module.ts
import {MatInputModule,MatCardModule,MatButtonModule} from "@angular/material";
import {browserAnimationsModule} from '@angular/platform-browser/animations';
imports:[
browserAnimationsModule,MatInputModule,MatButtonModule,]
angular 6 上面安装 Material UI
这几天看到 angular已经更新到了6,本着好奇的心态去看了下,发现 angular 6上面添加 material 变的简单多了。只需要一行命令就可以搞定。
进入到工程目录下
ng add @angular/material
图示:
安装 Ag-grid 的方法
Ag-grid 官网:https://www.ag-grid.com/
step 1:
npm install --save ag-grid-angular ag-grid
step 2:
angular.cli
"../node_modules/ag-grid/dist/styles/ag-grid.css","../node_modules/ag-grid/dist/styles/ag-theme-fresh.css"
step 3:
app.module.ts
imports:[
AgGridModule.withComponents([])
],exports:[
AgGridModule
]
安装 NG-ZORRO 的方法
NG-ZORRO 官网:https://ng.ant.design/version...
step 1: npm install ng-zorro-antd --save step 2: 直接用下面的代码替换 /src/app/app.module.ts 的内容
注意:在根 module 中需要使用 NgZorroAntdModule.forRoot(),在子 module 需要使用 NgZorroAntdModule
import { browserModule } from '@angular/platform-browser';
import { browserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgZorroAntdModule } from 'ng-zorro-antd';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],imports: [
browserModule,FormsModule,HttpClientModule,browserAnimationsModule,NgZorroAntdModule.forRoot()
],bootstrap: [AppComponent]
})
export class AppModule { }
step 3:
修改 .angular-cli.json 文件的 styles 列表
"styles": [
"../node_modules/ng-zorro-antd/src/ng-zorro-antd.less"
]