第1步：安装Angular Material，Angular CDK和Angular Animations
您可以使用npm或yarn命令行工具来安装包。在下面的示例中使用适合您的项目的任何一个。

npm install --save @angular/material @angular/cdk @angular/animations
yarn add @angular/material @angular/cdk @angular/animations
替代方案：快照构建
还可以使用master的最新更改构建快照。请注意，此快照构建不应被视为稳定，并且可能在版本之间中断。

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 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构建自己的文档！

AngularUI组件ag-GridAdatagridforAngularwithenterprisestylefeaturessuchassorting,filtering,customrender... 来自： 大强的博客 AngularMaterial是包含Navigation/Dashboard/Table三种图形类型，这篇文章中将会了解一些其使用的方式。准备:安装Material进入到上篇文章创建的demo2，使用... 来自： 知行合一 止于至善 推荐一门umedy上的angular课程： BuildAngular5appswithFirebaseandAngularMaterial点击打开链接内容比较简介,包括了angular里常用的一些知识... 来自： ass673556617的专栏 好的工具使应用程序开发更快速，更容易维护，比手动完成任何事情都要方便。该角CLI是一个命令行界面工具，可以创建一个项目，添加文件，并执行各种不断发展的任务，如测试，捆绑和部署。本指南的目标是使用Ang... 来自： 大强的博客 官方AngularMaterial入门有问题，请按照以下方法解决：1、安装AngularCLInpminstall-g@angular/cli 2、创建并运行新项目ngangular-material... 来自： 大强的博客 我喜欢直接给代码或者截图说明，所有的口头上说的都是垃圾，解决不了问题注：先吐槽一下angularmaterial这个垃圾官网，真的是坑，如果你按照他的方法那就等着吃屎吧开始：1.在控制台端口输入：np... 来自： thesameguo的博客 先上图： 官网：https://material.angular.io/guide/getting-started 一、安装插件：npminstall--save@angular/material... 来自： xif3681的博客 首先需要安装AngularMaterial，它需要安装成dependencycnpmi–save@angular/material@2.0.0-beta.7安装后package.json中的depen... 来自： 么么哒的博客 1.material的表单的父级已经变成form了所以用input的时候要引入import{MatInputModule}from'@angular/material/input';import{Ma... 来自： qq_34610497的博客 InstallAngularMaterial,AngularCDKandAngularAnimationsnpm:npminstall--save@angular/material@angular/c... 来自： weixin_34026276的博客 在Angular5发布半年之后，Angular6在昨天正式发布，那么在这个版本有哪些新功能呢？新版本重点关注工具链以及工具链在Angular中的运行速度问题。除此之外，这次更新还包括框架包（@angu... 来自： xiangzhihong8的专栏 百度百科：MaterialDesign，中文名：材料设计语言，是由Google推出的全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。... 来自： justforuse的博客 1.检测是否安装最新的node和npm2.未安装请到官网进行安装https://nodejs.org/en/3.创建angular项目请参考官网简单步骤https://angular.cn/docs/... 来自： xiaozhuangping的博客 Angular6已经正式发布了！这个主要版本并不关注于底层的框架，更多地关注于工具链，以及使Angular在未来更容易快速推进。作为发布的一部分，我们同步了主要的框架包  (@angular/core... 来自： Lc_style的博客 一.项目工程结构搭建1.创建项目使用脚手架工具进行搭建ngnewEnterprise--skin-install--style=scss--skin-install表示跳过npm安装(因为很慢)，或则... 来自： 汪喆_Jack的博客分享 1.按照官网的这个做就行https://material.angular.io/components/dialog/overview2.在app.module.ts中定义entryComponents... 来自： weixin_41905137的博客 从源码看angular/material2中dialog模块的实现　　本文将探讨material2中popup弹窗即其Dialog模块的实现。　　使用方法　　引入弹窗模块　　自己准备作为模板的弹窗内容... 来自： a906423355的博客 引用materialdialog方法　官方文档自定义弹框内容后的结果dialoghtml我是内容啊嘞，奇怪了，我并没哟设置　padding值，但是却有padding查看materialdialog组件... 来自： 遗忘了的自己 题外话：学习了jQuery后，就在公司接触了Angular，第一次接触的时候，简直一脸懵逼呀，对于曾经习惯了对DOM元素进行操作的我真的好难好难，Angular入门还是比较难的，还好，努力克服了这个坎... 来自： sinat_36146776的博客 表头固定我们都知道HTML中table的thead是会随着tbody滚动的。所以要实现tbody内容滚动，而表头固定就需要用两个table来显示，一个显示只用于表头，另一个用于显示tbody内容。表格... 来自： gemuandyou的专栏 例如: <td width="10%">1</td><td width="10%">2</td><td width="10%">3</td><td>44444444444444444444444444 效果图：  完整代码：&amp;lt;!DOCTYPEhtml&amp;gt;&amp;lt;htmllang=&quot;zh&quot;ng-app=&quot;myApp&quot;&amp;g... 来自： mollerlala的博客 问题1：ng-app指令的使用以及自定义指令 Hieveryone!'，这一点很重要的--> 我们看看指令本身的代码是如何定义的varmyModule=angular.module... 来自： 高山上的鱼 地址：${item.address?default('')}这里使用了freemarker的，你可以把变量直接设置成一段文字测试下~~~ （上面是js，下面是css）.abs-right_name{h... 来自： jinhua1314的专栏 dialog对话框很特殊，需要在模块中的entryComponents中引用传递数据：constdialogRef=dialog.open(YourDialog,{data:'yourdata'});... 来自： 么么哒的博客 这个平台很受益，能学到很多想学的东西，也很感谢大家的分享，下面也将自己觉得不错的2017年最全Angular4.x、Angular5.x、Angular6.x、Ionic3.x入门到实战视频教程分享给... 来自： yuanlaile的博客 随着Angular的深入发展，组件库开始涌现，比较成形的有两种：primeNG和ng-zorro，当然在最开始Angular自身就有自己的组件库，Boostrap也与之相结合，产生相应的组件库，下面随... 来自： 杨晓风 迷迭香的记忆 zorro对nz-sider和menu都提供了折叠的选项，可以很容易实现动态折叠的效果。menu的nzInlineCollapsedmenu通过nzInlineCollapsed的设定进行htmlli... 来自： 知行合一 止于至善 涉及到的技术栈：函数调用，双向数据绑定和H5的新标签的使用。代码如下：&amp;lt;!DOCTYPEhtml&amp;gt;&amp;lt;htmlng-app=&quot;myapp&quot;&... 来自： 车联网开发的博客 框架：angularjs+angular-material背景：在项目中，有时候会弹出一个form表单让用户填写信息。这时候，经常将form表单嵌在md-dialog中。然而，在angular-mat... 来自： qq_32490291的博客 非常漂亮的angular模块，使用google material design和bootstrap。可以直接拿来用的，用来学习angularjs和bootstrap都非常不错，相关的界面插件也有用到很 Angular7+Material2Overview题目的新手指的是自己，整理了一下Angularmaterial官网和CSDN上的整合方法，写一下，第一次写，纯粹的装P心切促使我写。既然要整合这两个... 来自： weixin_42027605的博客 发现一个好网站：https://www.22vd.com/en/?post_type=post&amp;amp;s=AngularPortal–Angular,React&amp;amp;HTMLMa... 来自： 大强的博客 AngularMaterial 详细介绍MaterialDesignforAngular是Angular官方团队开发的基于最新版本Angular的Material Design风格的框架，可和 Nes... 来自： 前端栈开发 公司最近开发图书馆软件，运用前端工程化的思想，前后端分离开发，前端架构采用Angular4前端架构+bootstrap+primeng,后端采用java,遵循javaee规范中的jersey和EJB。... 来自： 杨晓风 迷迭香的记忆 .bg-form:-moz-placeholder{color:#000;opacity:0;}.bg-form::-moz-placeholder{color:#000;opacity:0;}.bg... 来自： Angular_的博客 imports:[BrowserModule,BrowserAnimationsModule,],如果你已经正确添加，可能因为直接在material2 控件上写了动画转台，可以在material2组件... 来自： qq_32319999的博客 翻译自AngularMaterial官方主页，原文地址AngularMaterial官方入门教程，八步打造一个这样的app:这个app属于一种Master-Detail布局，即左侧是用户列表，右侧是用... 来自： weixin_34413103的博客 QEMU是一款高效而实用的模拟器及虚拟机监管器，本系列博客试图从最基本的安装使用开始，逐层深入地介绍QEMU。本篇文章从QEMU最基础的知识讲起，介绍了QEMU的安装使用、系统模拟的基本原理以及如何利... 来自： hunanchenxingyu的专栏 《C++0x漫谈》系列之：多线程内存模型 By 刘未鹏(pongba)刘言|C++的罗浮宫(http://blog.csdn.net/pongba)  《C++0x漫谈》系列导言 这个系列其实早就想写... 来自： 刘未鹏|C++的罗浮宫 首先引入一个概念，动态加载技术是什么？为什么要引入动态加载？它有什么好处呢？首先要明白这几个问题，我们先从 应用程序入手，大家都知道在Android App中，一个应用程序dex文件的方法数最大不能超... 来自： 【博客地址迁移到】：https://zhengxiaoyong.com Java中的ThreadLocal类允许我们创建只能被同一个线程读写的变量。因此，如果一段代码含有一个ThreadLocal变量的引用，即使两个线程同时执行这段代码，它们也无法访问到对方的Thread... 来自： u011860731的专栏 1）GPS以及iOS系统定位获得的坐标是地理坐标系WGS1984； 2）Web地图一般用的坐标细是投影坐标系WGS 1984 Web Mercator； 3）国内出于相关法律法规要求... 来自： jijiji000111的专栏 若函数的返回值是指针，且用const修饰，则函数返回值指向的内容是常数，不可被修改，此返回值仅能赋值给const修饰的相同类型的指针。如： 1  const int * f1(){ 2      ... 来自： 教学 & 技术专栏 本系列博客学习由非官方人员 半颗心脏 潜心所力所写，仅仅做个人技术交流分享，不做任何商业用途。如有不对之处，请留言，本人及时更改。1、 Esp8266之 搭建开发环境，开始一个“hellow worl... 来自： 徐宏的博客。 对象的内存分配从大方向上将，就是在堆上分配（但也可能经过JIT编译后被拆散为标量类型并间接在栈上分配），对象主要分配在新生代的Eden区上，如果启动了本地线程分配缓冲，将按线程优先在TLAB（转换后援... 来自： 小小本科生成长之路 现在需要判断一个西瓜是否为好瓜。假设西瓜有三个属性：色泽、根蒂、敲声。其中色泽有青绿、乌黑、浅白三种可能取值，根蒂有硬挺、稍蜷、蜷缩三种可能取值，敲声有清脆、浊响、沉闷三种可能取值。并且为每种属性考虑... 来自： CodeTutor 问题场景描述整个项目通过Maven构建，大致结构如下： 核心Spring框架一个module spring-boot-base service和dao一个module server-core 提供系统... 来自： 开发随笔 使用的是全志H3的芯片，运行Debian Desktop系统的ARM版本Armbian，要控制外部几个IO口，可以使用很多种方法，如果对GPIO的操作速度有要求就需要使用直接操作内存寄存器的方式来控制... 来自： 欢迎光临 1.通过windows身份验证方式登录 2.为登录名赋予服务器角色权限，其中dbcreator权限表示允许新增和修改权限，sysadmin权限是管理员权限,包含dbcreator范围，若不追求权限精... 来自： jingshaohui的专栏 fatal: unable to access '***': Peer reports incompatible or unsupported protocol version. CentOS7安装git Linux实例带宽和CPU跑满或跑高排查