第1步：安装Angular Material，Angular CDK和Angular Animations

您可以使用npm或yarn命令行工具来安装软件包。在下面的示例中使用适合您的项目的任何一个。

NPM

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

yarn

yarn add @angular/material @angular/cdk @angular/animations

第2步：配置动画

安装动画包后，导入BrowserAnimationsModule到您的应用程序中以启用动画支持。

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }

第3步：导入组件模块

为要使用的每个组件导入NgModule：

import {MatButtonModule, MatCheckboxModule} from '@angular/material';

@NgModule({
  ...
  imports: [MatButtonModule, MatCheckboxModule],
  ...
})
export class PizzaPartyAppModule { }

无论使用哪种方法，一定要导入角材料模块后角的 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

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'}
    //...
  }
});