Angular Material 7 快速指南

Angular Material 7 - 概述

Angular Material 7 是一个面向 Angular 开发人员的 UI 组件库。Angular Material 可重用的 UI 组件有助于构建具有吸引力、一致性和功能性的网页和 Web 应用程序，同时遵循现代 Web 设计原则，例如浏览器可移植性、设备独立性和优雅降级。

以下是 Angular Material 的一些主要特性：

内置响应式设计。
标准 CSS，占用空间极小。
包含按钮、复选框和文本字段等常用用户界面控件的新版本，这些控件已适应遵循 Material Design 概念。
包含卡片、工具栏、快速拨号、侧边导航、滑动等增强型和专用功能。
跨浏览器，可用于创建可重用的 Web 组件。

响应式设计

Angular Material 内置响应式设计，因此使用 Angular Material 创建的网站会根据设备尺寸自动调整其布局。
Angular Material 的类被设计成使网站能够适应任何屏幕尺寸。
使用 Angular Material 创建的网站与 PC、平板电脑和移动设备完全兼容。

可扩展性

Angular Material 本身设计简洁平实。
它的设计理念是：添加新的 CSS 规则比覆盖现有 CSS 规则更容易。
它支持阴影和醒目的颜色。
颜色和色调在各种平台和设备上保持一致。

最重要的是，Angular Material 完全免费使用。

Angular Material 7 - 环境设置

本教程将指导您如何准备开发环境，以便开始使用 Angular 框架和 Angular Material。在本章中，我们将讨论 Angular 6 所需的环境设置。要安装 Angular 6，我们需要以下内容：

Node.js
npm
Angular CLI
用于编写代码的 IDE

Node.js 版本必须高于 8.11，npm 版本必须高于 5.6。

Node.js

要检查系统中是否已安装 Node.js，请在终端中输入 **node -v**。这将帮助您查看当前系统中安装的 Node.js 版本。

C:\>node -v
v8.11.3

如果没有任何输出，请在您的系统上安装 Node.js。要安装 Node.js，请访问 Node.js 首页 https://node.org.cn/en/download/ 并根据您的操作系统安装软件包。

Node.js 首页如下所示：

根据您的操作系统安装所需的软件包。安装 Node.js 后，npm 也会随之安装。要检查 npm 是否已安装，请在终端中输入 npm -v。它应该显示 npm 的版本。

C:\>npm -v
5.6.0

借助 Angular CLI，Angular 6 的安装非常简单。访问 Angular 首页 https://cli.angular.io/ 以获取命令的参考。

输入 **npm install -g @angular/cli**，以在您的系统上安装 Angular CLI。

安装 Angular CLI 后，您将在终端中看到上述安装信息。您可以使用任何您选择的 IDE，例如 WebStorm、Atom、Visual Studio Code 等。

安装 Angular Material

运行以下命令以在创建的项目中安装 Angular Material 模块及其相关组件。

materialApp>npm install --save @angular/material @angular/cdk @angular/animations hammerjs

+ @angular/[email protected]
+ @angular/[email protected]
+ @angular/[email protected]
+ [email protected]
added 4 packages and updated 1 package in 39.699s

在 app.module.ts 文件中添加以下条目

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

imports: [
    ...
	FormsModule,
	ReactiveFormsModule,
    BrowserAnimationsModule
],

在 styles.css 文件中添加以下条目以获取主题。

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

在 index.html 文件中添加以下条目以获得 Material 图标支持。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Angular Material 7 - 自动完成

**<mat-autocomplete>** 是一个 Angular 指令，用作带有内置下拉菜单的特殊输入控件，用于显示与自定义查询匹配的所有可能结果。此控件充当实时建议框，用户只要在输入区域中键入内容，它就会立即显示结果。**<mat-autocomplete>** 可用于提供来自本地或远程数据源的搜索结果。

在本章中，我们将展示使用 Angular Material 绘制自动完成控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatAutocompleteModule,MatInputModule} from '@angular/material';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatAutocompleteModule,
      MatInputModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<form class="tp-form">
   <mat-form-field class="tp-full-width">
      <input type="text" 
         placeholder="US State" 
         aria-label="Number" 
         matInput 
         [formControl]="myControl" 
         [matAutocomplete]="auto">
         <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let state of states" [value]="state.value">
            {{state.display}}
         </mat-option>
      </mat-autocomplete>
   </mat-form-field>
</form>

以下是修改后的 CSS 文件 **app.component.css** 的内容。

.tp-form {
   min-width: 150px;
   max-width: 500px;
   width: 100%;
}
.tp-full-width {
   width: 100%;
}

以下是修改后的 ts 文件 **app.component.ts** 的内容。

import { Component } from '@angular/core';
import { FormControl } from "@angular/forms";
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp';
   myControl = new FormControl();
   states;
   constructor(){
      this.loadStates();
   }
   //build list of states as map of key-value pairs
   loadStates() {
      var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
         Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
         Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
         Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
         North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
         South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
         Wisconsin, Wyoming';
      this.states =  allStates.split(/, +/g).map( function (state) {
         return {
            value: state.toUpperCase(),
            display: state
         };
      });
   }
}

结果

验证结果。

详情

首先，我们创建了一个输入框，并使用 [matAutocomplete] 属性绑定了一个名为 **auto** 的自动完成控件。
然后，我们使用 mat-autocomplete 标签创建了一个名为 **auto** 的自动完成控件。
接下来，使用 *ngFor 循环创建选项。

Angular Material 7 - 复选框

**<mat-checkbox>** 是一个 Angular 指令，用作具有 Material Design 样式和动画功能的增强型复选框。

在本章中，我们将展示使用 Angular Material 绘制复选框控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatCheckboxModule} from '@angular/material';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatCheckboxModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<h2 class="tp-h2">Checkbox configuration</h2>
<section class="tp-section">
   <mat-checkbox class="tp-margin" [(ngModel)]="checked">Checked</mat-checkbox>
   <mat-checkbox class="tp-margin" [(ngModel)]="indeterminate">Indeterminate</mat-checkbox>
</section> 
<section class="tp-section">
   <mat-checkbox class="tp-margin" [(ngModel)]="disabled">Disabled</mat-checkbox>
</section>
<h2 class="tp-h2">Result</h2>
<section class="tp-section">
   <mat-checkbox
      class="tp-margin"
      [(ngModel)]="checked"
      [(indeterminate)]="indeterminate"
      [labelPosition]="labelPosition"
      [disabled]="disabled">
      Sample Checkbox
   </mat-checkbox>
</section>

以下是修改后的 CSS 文件 **app.component.css** 的内容。

.tp-h2 {
   margin: 10px;
}
.tp-section {
   display: flex;
   align-content: center;
   align-items: center;
   height: 60px;
}
.tp-margin {
   margin: 0 10px;
}

以下是修改后的 ts 文件 **app.component.ts** 的内容。

import { Component } from '@angular/core';
import { FormControl } from "@angular/forms";
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp';
   checked = false;
   indeterminate = false;
   labelPosition = 'after';
   disabled = false;
}

结果

验证结果。

详情

首先，我们使用 mat-checkbox 创建了三个复选框，并使用 ngModel 将它们与变量绑定。
然后，我们创建了另一个复选框，并展示了其与 .ts 文件中的变量绑定的各种属性。

Angular Material 7 - 日期选择器

**<mat-datepicker>** 是一个 Angular 指令，用于创建一个日期选择器控件，可以使用该控件从日历中选择日期，或者可以使用输入框直接输入日期。

在本章中，我们将展示使用 Angular Material 绘制日期选择器控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatDatepickerModule, MatInputModule,MatNativeDateModule} from '@angular/material';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatDatepickerModule, MatInputModule,MatNativeDateModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<mat-form-field>
   <input matInput [matDatepicker]="picker" placeholder="Choose a date">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

结果

验证结果。

详情

首先，我们创建了一个输入框，并使用 [matDatepicker] 属性绑定了一个名为 **picker** 的日期选择器。
然后，我们使用 mat-datepicker 标签创建了一个名为 **picker** 的日期选择器。

Angular Material 7 - 表单字段

**<mat-form-field>** 是一个 Angular 指令，用于在 Angular 组件上创建一个包装器，并用于应用下划线、粗体、提示等文本样式。

以下 Angular 组件可以在 **<mat-form-field>** 中使用：

<input matNativeControl>
<textarea matNativeControl>
<select matNativeControl>
<mat-select>
<mat-chip-list>

在本章中，我们将展示在 Angular Material 中使用 mat-form-field 控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatInputModule,MatOptionModule, MatSelectModule, MatIconModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatInputModule,MatOptionModule, MatSelectModule, MatIconModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 CSS 文件 **app.component.css** 的内容。

.tp-container {
   display: flex;
   flex-direction: column;
}
.tp-container > * {
   width: 100%;
}

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<div class="tp-container">
   <mat-form-field appearance="standard">
      <input matInput placeholder="Input">
      <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
      <mat-hint>Sample Hint</mat-hint>
   </mat-form-field>
   <mat-form-field appearance="fill">
      <textarea matInput placeholder="Textarea"></textarea>
   </mat-form-field>
   <mat-form-field appearance="outline">
      <mat-select placeholder="Select">
         <mat-option value="A">A</mat-option>
         <mat-option value="B">B</mat-option>
         <mat-option value="C">C</mat-option>      
      </mat-select>
   </mat-form-field>
</div>

结果

验证结果。

详情

首先，我们使用 mat-form-field 包装器创建了一个表单字段。我们使用 appearance 属性更改了表单字段的外观。
然后，将表单控件添加到表单字段。

Angular Material 7 - 输入框

**<mat-input>** 是一个 Angular 指令，用于 <input> 和 <textarea> 元素在 **<mat-form-field>** 下工作。

以下输入类型可以在 **<mat-input>** 中使用：

color
date
datetime-local
email
month
number
password
search
tel
text
time
url
week

在本章中，我们将展示在 Angular Material 中使用 mat-input 控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatInputModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatInputModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 CSS 文件 **app.component.css** 的内容。

.tp-form {
   min-width: 150px;
   max-width: 500px;
   width: 100%;
}
.tp-full-width {
   width: 100%;
}

以下是修改后的 ts 文件 **app.component.ts** 的内容。

import { Component } from '@angular/core';
import { FormControl } from "@angular/forms";
import {Validators} from '@angular/forms';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp';
   emailFormControl = new FormControl('', [
      Validators.required,
      Validators.email,
  ]);
}

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<form class="tp-form">
   <mat-form-field class="tp-full-width">
      <input matInput placeholder="Favorite Food" value="Pasta">
   </mat-form-field>
   <mat-form-field class="tp-full-width">
      <textarea matInput placeholder="Enter your comment"></textarea>
   </mat-form-field>
   <mat-form-field class="tp-full-width">
      <input matInput placeholder="Email" [formControl]="emailFormControl">
      <mat-error *ngIf="emailFormControl.hasError('email') 
         && !emailFormControl.hasError('required')">
         Please enter a valid email address
      </mat-error>
      <mat-error *ngIf="emailFormControl.hasError('required')">
         Email is <strong>required</strong>
      </mat-error>
   </mat-form-field>
</form>

结果

验证结果。

详情

首先，我们使用 mat-form-field 包装器创建了一个表单字段。
然后，使用 input 和 matInput 属性将表单控件添加到表单字段。

Angular Material 7 - 单选按钮

**<mat-radiobutton>** 是一个 Angular 指令，用于 <input type="radio">，以增强基于 Material Design 的样式。

在本章中，我们将展示使用 Angular Material 绘制单选按钮控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatRadioModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatRadioModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 CSS 文件 **app.component.css** 的内容。

.tp-radio-group {
   display: inline-flex;
   flex-direction: column;
}
.tp-radio-button {
   margin: 5px;
}
.tp-selected-value {
   margin: 15px 0;
}

以下是修改后的 ts 文件 **app.component.ts** 的内容。

import { Component } from '@angular/core';
import { FormControl } from "@angular/forms";
import { Validators } from "@angular/forms";
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp'; 
   favoriteSeason: string;
   seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn'];
}

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<mat-radio-group class="tp-radio-group" [(ngModel)]="favoriteSeason">
   <mat-radio-button class="tp-radio-button"
      *ngFor="let season of seasons" [value]="season">
      {{season}}
   </mat-radio-button>
</mat-radio-group>
<div class="tp-selected-value">
  Selected Season: {{favoriteSeason}}
</div>

结果

验证结果。

详情

首先，我们使用 mat-radio-group 创建了一个单选按钮组，并将其与 ngModel 绑定。
然后，我们使用 mat-radio-button 添加了单选按钮。

Angular Material 7 - 选择框

**<mat-select>** 是一个 Angular 指令，用于 <select>，以增强基于 Material Design 的样式。

在本章中，我们将展示使用 Angular Material 绘制选择控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatSelectModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatSelectModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 ts 文件 **app.component.ts** 的内容。

import { Component } from '@angular/core';
import { FormControl } from "@angular/forms";
export interface Food {
  value: string;
  display: string;
}
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp'; 
   selectedValue: string; 
   foods: Food[] = [
      {value: 'steak', display: 'Steak'},
      {value: 'pizza', display: 'Pizza'},
      {value: 'tacos', display: 'Tacos'}
   ];
}

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<form>
   <h4>mat-select</h4>
   <mat-form-field>
      <mat-select placeholder="Favorite food" 
         [(ngModel)]="selectedValue" name="food">
         <mat-option *ngFor="let food of foods" 
            [value]="food.value">
            {{food.display}}
         </mat-option>
      </mat-select>
   </mat-form-field>
   <p> Selected food: {{selectedValue}} </p> 
</form>

结果

验证结果。

详情

首先，我们使用 mat-select 创建了一个选择器，并将其与 ngModel 绑定。
然后，我们使用 mat-option 添加了选项。

Angular Material 7 - 滑块

**<mat-slider>** 是一个 Angular 指令，用作具有 Material Design 样式和动画功能的增强型范围选择器。

在本章中，我们将展示使用 Angular Material 绘制滑块控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatSliderModule, MatCheckboxModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatSliderModule, MatCheckboxModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<mat-slider
   class = "tp-margin"
   [disabled] = "disabled"
   [invert] = "invert"      
   [thumbLabel] = "thumbLabel"     
   [(ngModel)] = "value"
   [vertical] = "vertical">
</mat-slider>
<section class = "tp-section">
   <mat-checkbox class = "tp-margin" [(ngModel)] = "thumbLabel">Show thumb label</mat-checkbox>
</section>
<section class = "tp-section">
   <mat-checkbox class = "tp-margin" [(ngModel)] = "vertical">Vertical</mat-checkbox>
   <mat-checkbox class = "tp-margin" [(ngModel)] = "invert">Inverted</mat-checkbox>
</section>
<section class = "tp-section">
   <mat-checkbox class = "tp-margin" [(ngModel)] = "disabled">Disabled</mat-checkbox>
</section>

以下是修改后的 CSS 文件 **app.component.css** 的内容。

.tp-section {
   display: flex;
   align-content: center;
   align-items: center;
   height: 60px;
}
.tp-margin {
   margin: 30px;
}

.mat-slider-horizontal {
   width: 300px;
}
.mat-slider-vertical {
   height: 300px;
}

以下是修改后的 ts 文件 **app.component.ts** 的内容。

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp'; 
   disabled = false;
   invert = false;
   thumbLabel = false;
   value = 0;
   vertical = false;
}

结果

验证结果。

详情

首先，我们使用 mat-checkbox 创建了四个复选框，并使用 ngModel 将它们与变量绑定。这些属性将用于自定义滑块。
然后，我们创建了滑块，并展示了其与 .ts 文件中的变量绑定的各种属性。

Angular Material 7 - 开关滑块

**<mat-slide-toggle>** 是一个 Angular 指令，用作具有 Material Design 样式和动画功能的开关。

在本章中，我们将展示使用 Angular Material 绘制开关滑块控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatSlideToggleModule, MatCheckboxModule} from '@angular/material'
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatSlideToggleModule, MatCheckboxModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<mat-slide-toggle
   class = "tp-margin"         
   [checked] = "checked"
   [disabled] = "disabled">
   Slide!
</mat-slide-toggle>
<section class = "tp-section">
   <mat-checkbox class = "tp-margin" [(ngModel)] = "checked">Checked</mat-checkbox>
   <mat-checkbox class = "tp-margin" [(ngModel)] = "disabled">Disabled</mat-checkbox>
</section>

以下是修改后的 CSS 文件 **app.component.css** 的内容。

.tp-section {
   display: flex;
   align-content: center;
   align-items: center;
   height: 60px;
}
.tp-margin {
   margin: 30px;
}

以下是修改后的 ts 文件 **app.component.ts** 的内容。

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp'; 
   disabled = false;
   checked = false; 
}

结果

验证结果。

详情

首先，我们使用 mat-checkbox 创建了两个复选框，并使用 ngModel 将它们与变量绑定。这些属性将用于处理开关滑块。
然后，我们创建了滑动切换按钮，并在 .ts 文件中展示了其与变量绑定的各种属性。

Angular Material 7 - 菜单

<mat-menu> 是一个 Angular 指令，用于创建一个菜单并将其与控件关联，具有 Material Design 风格和动画功能。

本章将展示使用 Angular Material 绘制菜单控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatMenuModule, MatButtonModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatMenuModule, MatButtonModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<button mat-button [matMenuTriggerFor] = "menu">File</button>
<mat-menu #menu = "matMenu">
   <button mat-menu-item>New</button>
   <button mat-menu-item>Open</button>
   <button mat-menu-item [matMenuTriggerFor] = "recent">Recent</button>
</mat-menu>
<mat-menu #recent = "matMenu">
   <button mat-menu-item>File 1</button>
   <button mat-menu-item>File 2</button>
</mat-menu>

结果

验证结果。

详情

首先，我们使用 mat-menu 创建了两个菜单，并使用 matMenuTriggerFor 将它们绑定到按钮。
matMenuTriggerFor 传递菜单标识符以附加菜单。

Angular Material 7 - 侧边导航栏

<mat-sidenav> 是一个 Angular 指令，用于创建一个侧边导航栏和主内容面板，具有 Material Design 风格和动画功能。

<mat-sidenav-container> - 代表主容器。
<mat-sidenav-content> - 代表内容面板。
<mat-sidenav> - 代表侧边面板。

本章将展示使用 Angular Material 绘制侧边导航栏控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatSidenavModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatSidenavModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 CSS 文件 **app.component.css** 的内容。

.tp-container {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background: #eee;
}
.tp-section {
   display: flex;
   align-content: center;
   align-items: center;
   height: 60px;
   width:100px;   
}

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<mat-sidenav-container class = "tp-container">
   <mat-sidenav mode = "side" opened>
      <section class = "tp-section">
         <span>File</span>
      </section>
      <section class = "tp-section">
         <span>Edit</span>
      </section>
   </mat-sidenav>
   <mat-sidenav-content>Main content</mat-sidenav-content>
</mat-sidenav-container>

结果

验证结果。

详情

首先，我们创建了一个跨越整个页面的主容器。
然后使用 mat-sidenav 创建侧边导航栏，使用 mat-sidenav-content 创建内容面板。

Angular Material 7 - 工具栏

<mat-toolbar> 是一个 Angular 指令，用于创建一个工具栏来显示标题、页眉或任何操作按钮。

<mat-toolbar> - 代表主容器。
<mat-toolbar-row> - 添加新行。

本章将展示使用 Angular Material 绘制工具栏控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatToolbarModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatToolbarModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 CSS 文件 **app.component.css** 的内容。

.filler {
   flex: 1 1 auto;
}
.gap {
   margin-right: 10px;
}

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<mat-toolbar color = "primary">
   <span class = "gap">File</span>
   <span>Edit</span>
   <span class = "filler"></span>
   <span>About</span>
</mat-toolbar>

结果

验证结果。

详情

首先，我们创建了一个跨越整个页面的工具栏。
然后添加了标签。

Angular Material 7 - 卡片

<mat-card> 是一个 Angular 指令，用于创建一个具有 Material Design 风格和动画功能的卡片。它为常见的卡片部分提供预设样式。

<mat-card-title> − 代表标题部分。
<mat-card-subtitle> − 代表副标题部分。
<mat-card-content> − 代表内容部分。
<mat-card-actions> − 代表操作部分。
<mat-card-footer> − 代表页脚部分。

本章将展示使用 Angular Material 绘制卡片控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatCardModule, MatButtonModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatCardModule, MatButtonModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 CSS 文件 **app.component.css** 的内容。

.tp-card {
   max-width: 400px;
}
.tp-header-image {
   background-image: url('https://tutorialspoint.com/materialize/src/html5-mini-logo.jpg');
   background-size: cover;
}

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<mat-card class = "tp-card">
   <mat-card-header>
      <div mat-card-avatar class = "tp-header-image"></div>
      <mat-card-title>HTML5</mat-card-title>
      <mat-card-subtitle>HTML Basics</mat-card-subtitle>
   </mat-card-header>
   <img mat-card-image src = "https://tutorialspoint.com/materialize/src/html5-mini-logo.jpg" alt = "Learn HTML5">
   <mat-card-content>
      <p>
         HTML5 is the next major revision of the HTML standard superseding
         HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for
         structuring and presenting content on the World Wide Web.
      </p>
   </mat-card-content>
   <mat-card-actions>
      <button mat-button>LIKE</button>
      <button mat-button>SHARE</button>
   </mat-card-actions>
</mat-card>

结果

验证结果。

详情

在这里，我们使用 mat-card 创建了一个卡片。

Angular Material 7 - 分隔线

<mat-divider> 是一个 Angular 指令，用于创建一个具有 Material Design 风格和动画功能的分隔符。它提供两个项目之间的分隔符。

本章将展示使用 Angular Material 绘制分隔符控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatDividerModule, MatListModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatDividerModule, MatListModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<mat-list>
   <mat-list-item>Apple</mat-list-item>
   <mat-divider></mat-divider>
   <mat-list-item>Orange</mat-list-item>
   <mat-divider></mat-divider>
   <mat-list-item>Banana</mat-list-item>
</mat-list>

结果

验证结果。

详情

首先，我们使用 mat-list 创建了一个列表。
然后，我们使用 mat-divider 在列表项之间添加了分隔符。

Angular Material 7 - 展开面板

<mat-expansion-panel> 是一个 Angular 指令，用于创建一个可展开的详细视图与摘要视图。

<mat-expansion-panel-header> − 代表标题部分。包含面板摘要，并充当展开或折叠面板的控件。
<mat-panel-title> − 代表面板标题。
<mat-panel-description> − 代表面板摘要。
<mat-action-row> − 代表底部的操作面板。

本章将展示使用 Angular Material 绘制展开控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatExpansionModule, MatInputModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatExpansionModule, MatInputModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<mat-expansion-panel>
   <mat-expansion-panel-header>
      <mat-panel-title>
         Personal data
      </mat-panel-title>
      <mat-panel-description>
         Type name and age
      </mat-panel-description>
   </mat-expansion-panel-header>
   <mat-form-field>
      <input matInput placeholder="Name">
   </mat-form-field>
   <mat-form-field>
      <input matInput placeholder="Age">
   </mat-form-field>
</mat-expansion-panel>

结果

验证结果。

详情

首先，我们使用 mat-expansion-panel 创建了展开面板。
然后，我们向其中添加了标题、副标题和内容。

Angular Material 7 - 网格列表

<mat-grid-list> 是一个 Angular 指令，用于创建一个二维视图，将单元格排列到基于网格的布局中。

本章将展示使用 Angular Material 绘制网格列表控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatGridListModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatGridListModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 CSS 文件 **app.component.css** 的内容。

mat-grid-tile {
   background: lightblue;
}

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<mat-grid-list cols = "4" rowHeight = "100px">
   <mat-grid-tile 
   [colspan] = "3"
   [rowspan] = "1">1
   </mat-grid-tile>
   <mat-grid-tile 
   [colspan] = "1"
   [rowspan] = "2">2
   </mat-grid-tile>
   <mat-grid-tile 
   [colspan] = "1"
   [rowspan] = "1">3
   </mat-grid-tile>
   <mat-grid-tile 
   [colspan] = "2"
   [rowspan] = "1">4
   </mat-grid-tile>
</mat-grid-list>

结果

验证结果。

详情

首先，我们使用 mat-grid-list 创建了网格列表。
然后，我们使用 mat-grid-tile 添加了内容。

Angular Material 7 - 列表

<mat-list> 是一个 Angular 指令，用于创建一个容器来承载和格式化一系列项目。

本章将展示使用 Angular Material 绘制列表控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatListModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatListModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<mat-list role = "list">
   <mat-list-item role = "listitem">One</mat-list-item>
   <mat-list-item role = "listitem">Two</mat-list-item>
   <mat-list-item role = "listitem">Three</mat-list-item>
</mat-list>

结果

验证结果。

详情

首先，我们使用 mat-list 创建了一个列表。
然后，我们使用 mat-list-item 添加了内容。

Angular Material 7 - 步骤指示器

<mat-stepper> 是一个 Angular 指令，用于创建一个类似向导的工作流程步骤。

本章将展示使用 Angular Material 绘制步骤控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatStepperModule, MatInputModule, MatButtonModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatStepperModule, MatInputModule, MatButtonModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<mat-horizontal-stepper [linear] = "isLinear" #stepper>
   <mat-step [stepControl] = "firstFormGroup">
      <form [formGroup] = "firstFormGroup">
         <ng-template matStepLabel>Enter your name</ng-template>
         <mat-form-field>
            <input matInput placeholder = "Last name, First name" formControlName = "firstCtrl" required>
         </mat-form-field>
         <div>
           <button mat-button matStepperNext>Next</button>
         </div>
      </form>
   </mat-step>
   <mat-step [stepControl] = "secondFormGroup">
      <form [formGroup] = "secondFormGroup">
         <ng-template matStepLabel>Enter your address</ng-template>
         <mat-form-field>
           <input matInput placeholder = "Address" formControlName = "secondCtrl" required>
         </mat-form-field>
         <div>
           <button mat-button matStepperPrevious>Back</button>
           <button mat-button matStepperNext>Next</button>
         </div>
      </form>
   </mat-step>
   <mat-step>
      <ng-template matStepLabel>Done</ng-template>
         Details taken.
      <div>
         <button mat-button matStepperPrevious>Back</button>
         <button mat-button (click) = "stepper.reset()">Reset</button>
      </div>
   </mat-step>
</mat-horizontal-stepper>

以下是修改后的 ts 文件 **app.component.ts** 的内容。

import { Component } from '@angular/core';
import { FormControl } from "@angular/forms";
import { FormGroup } from "@angular/forms";
import { FormBuilder } from "@angular/forms";
import { Validators } from "@angular/forms";
export interface Food {
   value: string;
   display: string;
}
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp';   
   firstFormGroup: FormGroup;
   secondFormGroup: FormGroup;
   constructor(private _formBuilder: FormBuilder) {}
   ngOnInit() {
      this.firstFormGroup = this._formBuilder.group({
         firstCtrl: ['', Validators.required]
      });
      this.secondFormGroup = this._formBuilder.group({
         secondCtrl: ['', Validators.required]
      });
   }
}

结果

验证结果。

详情

首先，我们使用 mat-stepper 创建了步骤。
然后，我们使用 mat-step 添加了内容。

Angular Material 7 - 标签页

<mat-tab-group> 是一个 Angular 指令，用于创建一个选项卡式布局。

本章将展示使用 Angular Material 绘制选项卡控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatTabsModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatTabsModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<mat-tab-group>
   <mat-tab label = "A"> Apple </mat-tab>
   <mat-tab label = "B"> Banana </mat-tab>
   <mat-tab label = "C"> Carrot </mat-tab>
</mat-tab-group>

结果

验证结果。

详情

首先，我们使用 mat-tab-group 创建了选项卡。
然后，我们使用 mat-tab 添加了内容，其中每个 mat-tab 代表一个不同的选项卡。

Angular Material 7 - 树状视图

<mat-tree> 是一个 Angular 指令，用于创建一个具有 Material 风格的树来显示层次数据。

本章将展示使用 Angular Material 绘制树所需的配置。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatTreeModule, MatIconModule, MatButtonModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatTreeModule, MatIconModule, MatButtonModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<mat-tree [dataSource] = "dataSource" [treeControl] = "treeControl">
   <mat-tree-node *matTreeNodeDef = "let node" matTreeNodeToggle matTreeNodePadding>
      <button mat-icon-button disabled></button>
      {{node.filename}} : {{node.type}}
   </mat-tree-node>
   <mat-tree-node *matTreeNodeDef = "let node;when: hasChild" matTreeNodePadding>
      <button mat-icon-button matTreeNodeToggle [attr.aria-label] = "'toggle ' + node.filename">
         <mat-icon class = "mat-icon-rtl-mirror">
            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
         </mat-icon>
      </button>
      {{node.filename}}
   </mat-tree-node>
</mat-tree>

以下是修改后的 ts 文件 **app.component.ts** 的内容。

import {FlatTreeControl} from '@angular/cdk/tree';
import {Component, Injectable} from '@angular/core';
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
import {BehaviorSubject, Observable, of as observableOf} from 'rxjs';
export class FileNode {
   children: FileNode[];
   filename: string;
   type: any;
}
export class FileFlatNode {
   constructor(
      public expandable: boolean, public filename: string, public level: number, public type: any) {}
}
const TREE_DATA = JSON.stringify({
   Documents: {
      angular: {
         src: {
            compiler: 'ts',
            core: 'ts'
         }
      },
      material2: {
         src: {
            button: 'ts',
            checkbox: 'ts',
            input: 'ts'
         }
      }
   }
});
@Injectable()
export class FileDatabase {
   dataChange = new BehaviorSubject<FileNode[]>([]);
   get data(): FileNode[] { return this.dataChange.value; }
   constructor() {
      this.initialize();
   }
   initialize() {
      const dataObject = JSON.parse(TREE_DATA);   
      const data = this.buildFileTree(dataObject, 0);
      this.dataChange.next(data);
   } 
   buildFileTree(obj: {[key: string]: any}, level: number): FileNode[] {
      return Object.keys(obj).reduce<FileNode[]>((accumulator, key) => {
         const value = obj[key];
         const node = new FileNode();
         node.filename = key;
         if (value != null) {
            if (typeof value === 'object') {
               node.children = this.buildFileTree(value, level + 1);
            } else {
               node.type = value;
            }
         }
         return accumulator.concat(node);
      }, []);
   }
}
@Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.css'],
   providers: [FileDatabase]
})
export class AppComponent {
   treeControl: FlatTreeControl<FileFlatNode>;
   treeFlattener: MatTreeFlattener<FileNode, FileFlatNode>;
   dataSource: MatTreeFlatDataSource<FileNode, FileFlatNode>;
   constructor(database: FileDatabase) {
      this.treeFlattener = new MatTreeFlattener(this.transformer, this._getLevel,
      this._isExpandable, this._getChildren);
      this.treeControl = new FlatTreeControl<FileFlatNode>(this._getLevel, this._isExpandable);
      this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
      database.dataChange.subscribe(data => this.dataSource.data = data);
   }
   transformer = (node: FileNode, level: number) => {
      return new FileFlatNode(!!node.children, node.filename, level, node.type);
   }
   private _getLevel = (node: FileFlatNode) => node.level;
   private _isExpandable = (node: FileFlatNode) => node.expandable;
   private _getChildren = (node: FileNode): Observable<FileNode[]> => observableOf(node.children);
   hasChild = (_: number, _nodeData: FileFlatNode) => _nodeData.expandable;
}

结果

验证结果。

详情

首先，我们使用 mat-tree 和 mat-tree-node 创建了树。
然后，我们在 ts 文件中创建了数据源并将其与 mat-tree 绑定。

Angular Material 7 - 按钮

<mat-button> 是一个 Angular 指令，用于创建一个具有 Material 风格和动画的按钮。

本章将展示使用 Angular Material 绘制按钮控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule,MatIconModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatButtonModule,MatIconModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 CSS 文件 **app.component.css** 的内容。

.tp-button-row button,
.tp-button-row a {
   margin-right: 8px;
}

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<div class = "example-button-row">
   <button mat-button>Basic</button>
   <button mat-raised-button>Raised</button>
   <button mat-stroked-button>Stroked</button>
   <button mat-flat-button>Flat</button>
   <button mat-icon-button>
      <mat-icon aria-label="Heart">favorite</mat-icon>
   </button>
   <button mat-fab>Fab</button>
   <button mat-mini-fab>Mini</button>
   <a mat-button routerLink = ".">Link</a>
</div>

结果

验证结果。

详情

在这里，我们使用 mat-buttons 的各种变体创建了按钮。

Angular Material 7 - 切换按钮

<mat-button-toggle> 是一个 Angular 指令，用于创建一个具有 Material 风格和动画的切换或开/关按钮。mat-button-toggle 按钮可以配置为像单选按钮或复选框一样工作。它们通常是 <mat-button-toggle-group> 的一部分。

本章将展示使用 Angular Material 绘制切换按钮控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonToggleModule, MatIconModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatButtonToggleModule, MatIconModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 CSS 文件 **app.component.css** 的内容。

.tp-selected-value {
   margin: 15px 0;
}

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<mat-button-toggle-group #group = "matButtonToggleGroup">
   <mat-button-toggle value = "left">
      <mat-icon>format_align_left</mat-icon>
   </mat-button-toggle>
   <mat-button-toggle value = "center">
      <mat-icon>format_align_center</mat-icon>
   </mat-button-toggle>
   <mat-button-toggle value = "right">
      <mat-icon>format_align_right</mat-icon>
   </mat-button-toggle>
   <mat-button-toggle value = "justify" disabled>
      <mat-icon>format_align_justify</mat-icon>
   </mat-button-toggle>
</mat-button-toggle-group>
<div class = "tp-selected-value">Selected value: {{group.value}}</div>

结果

验证结果。

详情

首先，我们使用 mat-button-toggle-group 创建了一个切换按钮组。
然后，我们使用 mat-button-toggle 向组中添加了切换按钮。

Angular Material 7 - 徽章

<mat-badge> 是一个 Angular 指令，用于创建徽章，它是 UI 元素的小型状态描述符。徽章通常包含一个数字或其他简短的字符集，出现在另一个 UI 元素附近。

本章将展示使用 Angular Material 绘制徽章控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatBadgeModule, MatButtonModule, MatIconModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatBadgeModule, MatButtonModule, MatIconModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<p><span matBadge = "4" matBadgeOverlap = "false">Mail</span></p>
<p>
   <button mat-raised-button color = "primary"
      matBadge = "8" matBadgePosition = "before" matBadgeColor = "accent">
      Action
   </button>
</p>
<p><mat-icon matBadge = "15" matBadgeColor = "warn">home</mat-icon></p>

结果

验证结果。

详情

首先，我们创建了一个 span、一个按钮和一个图标。
然后，我们使用 mat-badge 属性向每个元素添加了徽章。

Angular Material 7 - 芯片

<mat-chip-list> 是一个 Angular 指令，用于将一系列值作为芯片显示。

本章将展示使用 Angular Material 绘制芯片控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatChipsModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatChipsModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<mat-chip-list>
   <mat-chip>One</mat-chip>
   <mat-chip>Two</mat-chip>
   <mat-chip color = "primary" selected>Tree</mat-chip>
   <mat-chip color = "accent" selected>Four</mat-chip>
</mat-chip-list>

结果

验证结果。

详情

首先，我们使用 mat-chip-list 创建了芯片列表。
然后，我们使用 mat-chip 向每个芯片列表添加了芯片。

Angular Material 7 - 图标

<mat-icon> 是一个 Angular 指令，用于添加具有 Material 风格的基于矢量/SVG 的图标。

本章将展示使用 Angular Material 绘制图标控件所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatIconModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatIconModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<mat-icon>home</mat-icon>

结果

验证结果。

详情

在这里，我们使用 mat-icon 创建了主页图标。我们使用的是 Google Material Icons。

Angular Material 7 - 进度旋转器

<mat-progress-spinner> 是一个 Angular 指令，用于显示具有 Material 风格的进度微调器。

本章将展示使用 Angular Material 绘制确定性和不确定性进度微调器所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatProgressSpinnerModule, MatRadioModule, MatSliderModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatProgressSpinnerModule, MatRadioModule, MatSliderModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 ts 文件 app.component.css 的内容。

.tp-section {
   display: flex;
   align-content: center;
   align-items: center;
   height: 60px;
}
.tp-margin {
   margin: 0 10px;
}

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<section class = "tp-section">
   <label class = "tp-margin">Color:</label>
   <mat-radio-group [(ngModel)] = "color">
      <mat-radio-button class = "tp-margin" value = "primary">
         Primary
      </mat-radio-button>
      <mat-radio-button class = "tp-margin" value = "accent">
         Accent
      </mat-radio-button>
      <mat-radio-button class = "tp-margin" value = "warn">
         Warn
      </mat-radio-button>
   </mat-radio-group>
</section>
<section class = "tp-section">
   <label class = "tp-margin">Mode:</label>
   <mat-radio-group [(ngModel)] = "mode">
      <mat-radio-button class = "tp-margin" value = "determinate">
         Determinate
      </mat-radio-button>
      <mat-radio-button class = "tp-margin" value = "indeterminate">
         Indeterminate
      </mat-radio-button>
   </mat-radio-group>
</section>
<section class = "tp-section" *ngIf = "mode === 'determinate'">
   <label class = "tp-margin">Progress:</label>
   <mat-slider class = "tp-margin" [(ngModel)] = "value"></mat-slider>
</section>
<section class = "tp-section">
   <label class = "tp-margin">Mode: {{mode}}</label>
   <mat-progress-spinner
      class = "tp-margin"
      [color] = "color"
      [mode] = "mode"
      [value] = "value">
   </mat-progress-spinner>
</section>

以下是修改后的 ts 文件 **app.component.ts** 的内容。

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp'; 
   color = 'primary';
   mode = 'determinate';
   value = 50;
   
}

结果

验证结果。

详情

在这里，我们使用 mat-progress-spinner 创建了进度微调器。

Angular Material 7 - 进度条

<mat-progress-bar> 是一个 Angular 指令，用于显示具有 Material 风格的进度条。

本章将展示使用 Angular Material 绘制确定性和不确定性进度条所需的配置。

创建 Angular 应用程序

请按照以下步骤更新我们在 *Angular 6 - 项目设置* 一章中创建的 Angular 应用程序：

步骤	描述
1	创建一个名为 materialApp 的项目，如 Angular 6 - 项目设置一章中所述。
2	修改 app.module.ts、app.component.ts、app.component.css 和 app.component.html，如下所述。保持其余文件不变。
3	编译并运行应用程序以验证已实现逻辑的结果。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatProgressBarModule, MatRadioModule, MatSliderModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatProgressBarModule, MatRadioModule, MatSliderModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 ts 文件 app.component.css 的内容。

.tp-section {
   display: flex;
   align-content: center;
   align-items: center;
   height: 60px;
}
.tp-margin {
   margin: 0 10px;
}

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<section class = "tp-section">
   <label class = "tp-margin">Color:</label>
   <mat-radio-group [(ngModel)] = "color">
      <mat-radio-button class = "tp-margin" value = "primary">
         Primary
      </mat-radio-button>
      <mat-radio-button class = "tp-margin" value = "accent">
         Accent
      </mat-radio-button>
      <mat-radio-button class = "tp-margin" value = "warn">
         Warn
      </mat-radio-button>
   </mat-radio-group>
</section>
<section class = "tp-section">
   <label class = "tp-margin">Mode:</label>
   <mat-radio-group [(ngModel)] = "mode">
      <mat-radio-button class = "tp-margin" value = "determinate">
         Determinate
      </mat-radio-button>
      <mat-radio-button class = "tp-margin" value = "indeterminate">
         Indeterminate
      </mat-radio-button>
      <mat-radio-button class = "tp-margin" value = "buffer">
         Buffer
      </mat-radio-button>
      <mat-radio-button class = "tp-margin" value = "query">
         Query
      </mat-radio-button>
   </mat-radio-group>
</section>
<section class = "tp-section" *ngIf = "mode === 'determinate' || mode === 'buffer'">
   <label class = "tp-margin">Progress:</label>
   <mat-slider class = "tp-margin" [(ngModel)] = "value"></mat-slider>
</section>
<section class = "tp-section" *ngIf = "mode === 'buffer'">
   <label class = "tp-margin">Buffer:</label>
   <mat-slider class = "tp-margin" [(ngModel)] = "bufferValue"></mat-slider>
</section>
<section class = "tp-section">
   <label class = "tp-margin">Mode: {{mode}}</label>
   <mat-progress-bar
      class = "tp-margin"
      [color] = "color"
      [mode] = "mode"
      [value] = "value"
      [bufferValue] = "bufferValue"
      >
   </mat-progress-bar>
</section>

以下是修改后的 ts 文件 **app.component.ts** 的内容。

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp'; 
   color = 'primary';
   mode = 'determinate';
   value = 50;
   bufferValue = 75;
}

结果

验证结果。

详情

在这里，我们使用 mat-progress-bar 创建了进度条。

Angular Material 7 - 水波纹效果

<mat-ripple> 是一个 Angular 指令，用于定义一个表示用户交互的区域。

本章将展示使用 Angular Material 绘制波纹效果所需的配置。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatRippleModule, MatCheckboxModule, MatInputModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatRippleModule, MatCheckboxModule, MatInputModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<mat-checkbox [(ngModel)] = "centered" class = "tp-ripple-checkbox">Centered</mat-checkbox>
<mat-checkbox [(ngModel)] = "disabled" class = "tp-ripple-checkbox">Disabled</mat-checkbox>
<mat-checkbox [(ngModel)] = "unbounded" class = "tp-ripple-checkbox">Unbounded</mat-checkbox>
<section>
   <mat-form-field class = "tp-ripple-form-field">
      <input matInput [(ngModel)] = "radius" type = "number" placeholder = "Radius">
   </mat-form-field>
   <mat-form-field class = "tp-ripple-form-field">
      <input matInput [(ngModel)] = "color" type = "text" placeholder = "Color">
   </mat-form-field>
</section>
<div class = "tp-ripple-container mat-elevation-z4"
   matRipple
   [matRippleCentered] = "centered"
   [matRippleDisabled] = "disabled"
   [matRippleUnbounded] = "unbounded"
   [matRippleRadius] = "radius"
   [matRippleColor] = "color">
   Click me
</div>

以下是修改后的 CSS 文件 **app.component.css** 的内容。

.tp-ripple-container {
   cursor: pointer;
   text-align: center;
   width: 300px;
   height: 300px;
   line-height: 300px;
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   -webkit-user-drag: none;
   -webkit-tap-highlight-color: transparent;
}
.tp-ripple-checkbox {
   margin: 6px 12px 6px 0;
}
.tp-ripple-form-field {
   margin: 0 12px 0 0;
}

以下是修改后的 ts 文件 **app.component.ts** 的内容。

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'materialApp'; 
   centered = false;
   disabled = false;
   unbounded = false;
   radius: number;
   color: string;
}

结果

验证结果。

详情

首先，我们使用 mat-checkbox 创建了复选框，并使用 ngModel 将它们与变量绑定。这些属性将用于自定义波纹。
然后，我们创建了波纹，并在 .ts 文件中展示了其与变量绑定的各种属性。

Angular Material 7 - SnackBar

<MatSnackBar> 是一个 Angular 指令，用于显示通知栏，作为移动设备上对话框/弹出窗口的替代方案。

本章将展示使用 Angular Material 显示 SnackBar 所需的配置。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule,MatSnackBarModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatButtonModule,MatSnackBarModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<button mat-button (click)="openSnackBar('Party', 'act')">Show snack-bar</button>

以下是修改后的 ts 文件 **app.component.ts** 的内容。

import {Component, Injectable} from '@angular/core';
import { MatSnackBar } from "@angular/material";
@Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.css']
})
export class AppComponent {
   constructor(public snackBar: MatSnackBar) {}
   openSnackBar(message: string, action: string) {
      this.snackBar.open(message, action, {
         duration: 2000,
      });
   } 
}

结果

验证结果。

详情

在这里，我们创建了一个使用 mat-button 的按钮，单击该按钮将显示 SnackBar。

Angular Material 7 - 工具提示

<MatTooltip> 是一个 Angular 指令，用于显示 Material 风格的工具提示。

本章将展示使用 Angular Material 显示工具提示所需的配置。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule,MatTooltipModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatButtonModule,MatTooltipModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<button mat-raised-button
   matTooltip = "Sample Tooltip"
   aria-label = "Sample Tooltip">
   Click Me!
</button>

结果

验证结果。

详情

在这里，我们创建了一个使用 mat-button 的按钮，悬停时将显示工具提示。

Angular Material 7 - 分页器

<mat-paginator> 是一个 Angular 指令，用于显示带有分页信息的导航器。

本章将展示使用 Angular Material 显示分页器所需的配置。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatPaginatorModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatPaginatorModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<mat-paginator [length] = "100"
   [pageSize] = "10"
   [pageSizeOptions] = "[5, 10, 25, 100]"
   (page) = "pageEvent = $event">
</mat-paginator>
<div *ngIf = "pageEvent">
   <h5>Page Change Event</h5>
   <div>List length: {{pageEvent.length}}</div>
   <div>Page size: {{pageEvent.pageSize}}</div>
   <div>Page index: {{pageEvent.pageIndex}}</div>
</div>

结果

验证结果。

详情

在这里，我们使用 mat-paginator 创建了一个分页器并处理其 change 事件。

Angular Material 7 - 排序表头

<mat-sort-header> 和 matSort 是 Angular 指令，用于向表头添加排序功能。

本章将展示使用 Angular Material 显示排序标题所需的配置。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatSortModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatSortModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<table matSort (matSortChange) = "sortFood($event)">
   <tr>
      <th mat-sort-header = "name">Dessert (100g)</th>
      <th mat-sort-header = "calories">Calories</th>
      <th mat-sort-header = "fat">Fat (g)</th>
      <th mat-sort-header = "carbs">Carbs (g)</th>
      <th mat-sort-header = "protein">Protein (g)</th>
   </tr>
   <tr *ngFor = "let food of sortedFood">
      <td>{{food.name}}</td>
      <td>{{food.calories}}</td>
      <td>{{food.fat}}</td>
      <td>{{food.carbs}}</td>
      <td>{{food.protein}}</td>
   </tr>
</table>

以下是修改后的 ts 文件 **app.component.ts** 的内容。

import {Component, Injectable} from '@angular/core';
import {Sort} from '@angular/material';
export interface Food {
   calories: number;
   carbs: number;
   fat: number;
   name: string;
   protein: number;
}
@Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.css']
})
export class AppComponent { 
   foods: Food[] = [
      {name: 'Yogurt', calories: 159, fat: 6, carbs: 24, protein: 4},
      {name: 'Sandwich', calories: 237, fat: 9, carbs: 37, protein: 4},
      {name: 'Eclairs', calories: 262, fat: 16, carbs: 24, protein: 6},
      {name: 'Cupcakes', calories: 305, fat: 4, carbs: 67, protein: 4},
      {name: 'Gingerbreads', calories: 356, fat: 16, carbs: 49, protein: 4},
   ];
   sortedFood: Food[];
   constructor() {
      this.sortedFood = this.foods.slice();
   }
   sortFood(sort: Sort) {
      const data = this.foods.slice();
      if (!sort.active || sort.direction === '') {
         this.sortedFood = data;
         return;
      }
      this.sortedFood = data.sort((a, b) => {
         const isAsc = sort.direction === 'asc';
         switch (sort.active) {
            case 'name': return compare(a.name, b.name, isAsc);
            case 'calories': return compare(a.calories, b.calories, isAsc);
            case 'fat': return compare(a.fat, b.fat, isAsc);
            case 'carbs': return compare(a.carbs, b.carbs, isAsc);
            case 'protein': return compare(a.protein, b.protein, isAsc);
            default: return 0;
         } 
      });
   }
}
function compare(a: number | string, b: number | string, isAsc: boolean) {
   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

结果

验证结果。

详情

在这里，我们创建了一个表格。添加了 matSort 并处理其 matSortChange 事件。

Angular Material 7 - 表格

<mat-table> 是 Angular 指令，用于创建具有 Material Design 和样式的表格。

本章将展示使用 Angular Material 显示表格所需的配置。

以下是修改后的模块描述符 **app.module.ts** 的内容。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatTableModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatTableModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

以下是修改后的 HTML 主机文件 **app.component.html** 的内容。

<table mat-table [dataSource] = "dataSource" class = "mat-elevation-z8"> 
   <ng-container matColumnDef = "name">
      <th mat-header-cell *matHeaderCellDef> Dessert (100g)</th>
      <td mat-cell *matCellDef = "let element"> {{element.name}} </td>
   </ng-container>
   <ng-container matColumnDef = "calories">
      <th mat-header-cell *matHeaderCellDef>Calories</th>
      <td mat-cell *matCellDef = "let element"> {{element.calories}} </td>
   </ng-container>
   <ng-container matColumnDef = "fat">
      <th mat-header-cell *matHeaderCellDef>Fat (g)</th>
      <td mat-cell *matCellDef = "let element"> {{element.fat}} </td>
   </ng-container>
   <ng-container matColumnDef = "carbs">
      <th mat-header-cell *matHeaderCellDef>Carbs (g)</th>
      <td mat-cell *matCellDef = "let element"> {{element.carbs}} </td>
   </ng-container>
   <ng-container matColumnDef = "protein">
      <th mat-header-cell *matHeaderCellDef>Protein (g)</th>
     <td mat-cell *matCellDef = "let element"> {{element.protein}} </td>
   </ng-container> 
   <tr mat-header-row *matHeaderRowDef = "displayedColumns"></tr>
   <tr mat-row *matRowDef = "let row; columns: displayedColumns;"></tr>
</table>

以下是修改后的 ts 文件 app.component.css 的内容。

table {
   width: 100%;
}

以下是修改后的 ts 文件 **app.component.ts** 的内容。

import {Component, Injectable} from '@angular/core';
import {Sort} from '@angular/material';
export interface Food {
   calories: number;
   carbs: number;
   fat: number;
   name: string;
   protein: number;
}
@Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.css']
})
export class AppComponent { 
   dataSource: Food[] = [
      {name: 'Yogurt', calories: 159, fat: 6, carbs: 24, protein: 4},
      {name: 'Sandwich', calories: 237, fat: 9, carbs: 37, protein: 4},
      {name: 'Eclairs', calories: 262, fat: 16, carbs: 24, protein: 6},
      {name: 'Cupcakes', calories: 305, fat: 4, carbs: 67, protein: 4},
      {name: 'Gingerbreads', calories: 356, fat: 16, carbs: 49, protein: 4},
   ];
   displayedColumns: string[] = ['name', 'calories', 'fat', 'carbs','protein'];
}

结果

验证结果。

详情

在这里，我们创建了一个表格。使用 mat-row 和 mat-header-row 添加了 mat-Table 并处理 tr 和 th。

打印

打印页面