Angular Material安装

https://github.com/angular/material2

https://material.angular.io/guide/getting-started

有关开始使用新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

 备选方案1：快照构建

还可以使用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：Angular Devkit 6+

使用Angular CLI ng add命令将使用正确的依赖项更新Angular项目，执行配置更改并执行初始化代码。

ng add @angular/material

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

组件列表

1.表单控件

测试查询:

https://github.com/aveferrum/angular-material-demo

https://github.com/angular/material2/tree/master/src/material-examples

https://github.com/angular/material2-docs-content

https://stackoverflow.com/questions/49131420/cant-bind-to-datasource-since-it-isnt-a-known-property-of-mat-tree

https://stackoverflow.com/questions/43603515/uncaught-error-unexpected-directive-mycombobox-imported-by-the-module-appmod

1. import modules and not the components or services

2. declare components and not the modules or services.

3. provide services and not components or modules.

https://github.com/angular/material.angular.io

https://github.com/salansun/angular-material2-demo1/blob/master/package.json

https://blog.csdn.net/youhan26/article/details/51423613

https://blog.csdn.net/u014291497/article/details/60468967

 测试步骤:

下载

https://github.com/angular/material2/

下载

https://github.com/aveferrum/angular-material-demo

以material2中的materials-examples中的tree-checklist为例

拷贝tree-checklist目录到angular-material-demo的src下，

修改app.module.ts

import 'hammerjs';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { AppMaterialModule } from './app.material.module';
import { AppComponent, DialogContentComponent } from './app.component';
import { TreeChecklistExample } from './tree-checklist/tree-checklist-example';
import {MatTreeModule} from '@angular/material/tree';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppMaterialModule,
    BrowserAnimationsModule,
    MatTreeModule
  ],
  declarations: [AppComponent, DialogContentComponent,TreeChecklistExample],//
  entryComponents: [DialogContentComponent],
  bootstrap: [AppComponent],
})
export class AppModule { }

修改app.component.html添加

    <mat-card>
      <mat-card-content>
        <tree-checklist-example></tree-checklist-example>
      </mat-card-content>
    </mat-card>

index.html中的fonts.googleapis.com访问不了修改成如下

  <!--link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"-->
  <style>
    /* fallback */
    @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(http://fonts.gstatic.com/s/materialicons/v41/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
  }
  
  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }
  </style>
执行npm install 和ng serve运行查看效果如下

The best docs available so far are available in the READMEs for each component in the GitHub repo.

For a component like SnackBar this would be: https://github.com/angular/material2/tree/master/src/lib/snack-bar

And button would be here: https://github.com/angular/material2/tree/master/src/lib/button

I believe (personally, not speaking for the team) that the team will start to prioritize the improvements of the docs at some time during Beta, but it's currently still in Alpha (Alpha.10 released today).

Michael Prentice

https://stbui.github.io/angular-material-app/materials/tabs

https://github.com/stbui/angular-material-app

https://github.com/seeschweiler/angular6-material/tree/master/src/app

https://loiane.com/2017/08/angular-hide-navbar-login-page/

https://github.com/loiane/angular-login-hide-navbar

https://www.bossable.com/1745/angularjs-material-design-contact-form/

 angular material 布局练习: