如何在项目中添加Angular Material

Angular Material是一个基于Angular的开源UI库，它提供了丰富的UI组件，可以快速而方便地构建出现代化的Web应用程序的UI界面。在本文中，我们将学习如何将Angular Material添加到我们的Angular项目中。

步骤一：安装Angular Material和Angular CDK

在使用Angular Material之前，我们需要通过npm包管理器来安装@angular/material和@angular/cdk，同时还需要安装相关的依赖。我们可以通过下面的命令来完成安装：

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

步骤二：导入需要的模块

在我们的应用程序模块中，我们需要导入Angular Material模块和相应的组件模块。在根模块app.module.ts中导入以下内容：

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

import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatIconModule } from '@angular/material/icon';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,

    MatButtonModule,
    MatCheckboxModule,
    MatIconModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

步骤三：使用Angular Material组件

现在，我们就可以在我们的应用程序中使用Angular Material的组件了。例如，我们可以在我们的组件中使用MatButton来创建一个按钮：

<!--app.component.html-->
<button mat-button>Click me!</button>

步骤四：样式配置

如果我们想要对Angular Material的CSS进行一些自定义，我们可以通过全局CSS文件来配置样式。我们需要在angular.json文件中的styles数组中添加全局CSS文件，例如：

{
  ...
  "projects": {
    "my-app": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "styles": [
              "src/styles.css"
            ],
            ...
          },
          ...
        },
        ...
      },
      ...
    }
  },
  ...
}

这里，我们将src/styles.css文件添加到了样式数组中，这样我们就可以在该文件中添加我们的样式设置。

至此，我们就成功地将Angular Material添加到我们的Angular应用程序中了。现在，我们可以使用Angular Material的所有组件来快速而方便地构建漂亮的UI。