主要组件版本

• Angular: v7.2
• Angular Material: UI框架, v7.3

安装、创建Angular项目

参考https://angular.io/guide/setup-local
必须安装内容：

• node.js: v10+
• Angular CLI

npm install -g @angular/cli

加入Angular Material

https://material.angular.io/: UI框架 （Material Design components for Angular. ）

安装 Angular Material

ng add @angular/material

根据提示选择主题（theme），css语言等。

添加第一个组件

添加引用

//app.module.ts

import { MatSliderModule } from '@angular/material/slider';
…
@NgModule ({....
  imports: [...,
  MatSliderModule,
…]
})

// app.component.html 使用<mat-slider>
<mat-slider min="1" max="100" step="1" value="1"></mat-slider>

运行、查看效果

npm start

浏览器打开 http://localhost:4200 ，效果:

mat-slider.PNG

单元测试 （Unit Test）
使用AngularCLI，自动生成UT代码。我们首先执行UT

npm test
// or 
ng test

将得到错误的结果：'mat-slider' is not a known element。
这是因为自动生成的component 和UT，不能自动添加mat-slider的引用。解决办法，

// app.component.spec.ts
import { MatSliderModule } from '@angular/material/slider';
// ...
TestBed.configureTestingModule({
  imports: [
    RouterTestingModule,
    MatSliderModule // import MatSlider
  ],
  declarations: [
    AppComponent
  ],
}).compileComponents();

Demo Code

https://github.com/jackniu81/angular2020/tree/chapter1