Angular Material入门
有关开始使用新Angular应用程序的帮助，请查看Angular CLI。
对于现有应用，请按照以下步骤开始使用Angular Material。
第1步：安装Angular Material，Angular CDK和Angular Animations
您可以使用npm或yarn命令行工具来安装包。在下面的示例中使用适合您的项目的任何一个。
NPM
npm install --save @angular/material @angular/cdk @angular/animations
纱
yarn add @angular/material @angular/cdk @angular/animations
替代方案：快照构建
还可以使用master的最新更改构建快照。请注意，此快照构建不应被视为稳定，并且可能在版本之间中断。
NPM
npm install --save angular/material2-builds angular/cdk-builds angular/animations-builds
纱
yarn add angular/material2-builds angular/cdk-builds angular/animations-builds
第2步：配置动画
安装动画包后，导入BrowserAnimationsModule到您的应用程序中以启用动画支持。
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
...
imports: [BrowserAnimationsModule],
...
})
export class PizzaPartyAppModule { }
或者，您可以通过导入禁用动画NoopAnimationsModule。
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
...
imports: [NoopAnimationsModule],
...
})
export class PizzaPartyAppModule { }
第3步：导入组件模块
为要使用的每个组件导入NgModule：
import {MatButtonModule, MatCheckboxModule} from '@angular/material';
@NgModule({
...
imports: [MatButtonModule, MatCheckboxModule],
...
})
export class PizzaPartyAppModule { }
或者，您可以创建一个单独的NgModule，用于导入将在应用程序中使用的所有Angular Material组件。然后，您可以将此模块包含在您要使用组件的任何位置。
import {MatButtonModule, MatCheckboxModule} from '@angular/material';
@NgModule({
imports: [MatButtonModule, MatCheckboxModule],
exports: [MatButtonModule, MatCheckboxModule],
})
export class MyOwnCustomMaterialModule { }
无论使用哪种方法，一定要导入角材料模块后角的BrowserModule，因为进口秩序事项NgModules。
第4步：包含主题
包含主题是将所有核心和主题样式应用于您的应用程序所必需的。
要开始使用预先构建的主题，请在应用程序中全局包含Angular Material的预构建主题之一。如果您使用的是Angular CLI，可以将其添加到styles.css：
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
如果您没有使用Angular CLI，则可以通过<link>您的元素包含预构建的主题index.html。
有关主题的更多信息以及有关如何创建自定义主题的说明，请参阅主题指南。
第5步：手势支持
一些组件（mat-slide-toggle，mat-slider，matTooltip）依靠HammerJS的手势。为了获得这些组件的完整功能集，必须将HammerJS加载到应用程序中。
您可以通过npm，CDN（例如Google CDN）将HammerJS添加到您的应用程序，或直接从您的应用程序提供。
要通过npm安装，请使用以下命令：
NPM
npm install --save hammerjs
纱
yarn add hammerjs
安装后，将其导入应用程序的入口点（例如src/main.ts）。
import 'hammerjs';
步骤6（可选）：添加材料图标
如果要将mat-icon组件与官方Material Design Icons一起使用，请在您的index.html。中加载图标字体。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
有关使用“材质图标”的更多信息，请查看“ 材质图标指南”。
请注意，它mat-icon支持任何字体或svg图标; 使用材料图标是众多选项之一。
附录：配置SystemJS
如果你的项目使用模块加载SystemJS，你将需要添加@angular/material和@angular/cdk到SystemJS配置。
该@angular/cdk包由多个入口点组成。这些入口点中的每一个都必须使用SystemJS单独注册。
这里是其中示例性配置@angular/material，@angular/cdk/platform并且@angular/cdk/a11y被使用：
System.config({
// Existing configuration options
map: {
// ...
'@angular/material': 'npm:@angular/material/bundles/material.umd.js',
// CDK individual packages
'@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
'@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
// ...
'hammerjs': 'npm:hammerjs',
},
packages: {
//...
hammerjs: {main: './hammer.min.js', defaultExtension: 'js'}
//...
}
});
Angular Material项目示例
material.angular.io - 我们使用Angular Material构建自己的文档！