在Angular应用程序中添加Angular材质组件

Angular Material提供了Angular的设计组件。这是由Angular团队构建和维护的。这为Angular开发人员提供了常见的UI组件和工具，以帮助构建他们自己的自定义组件。作为用户，我们可以使用他们提供的npm软件包将其与Angular应用程序集成。
Angular Material还提供CDK以集成常见的交互模式。

提供的一些组件的列表是：

1. 表格控制
2. 导航
3. 布局
4. 按钮和指示灯
5. 数据表
6. 弹出窗口
7. 模态

将材料成分添加到您的应用程序中的步骤

安装角度

创建一个Angular CLI项目

安装Angular Material npm软件包并添加相应的angular / cdk，因为angular material使用并依赖于它：

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

此命令会将最新的Angular Material Version包添加到项目中，以及“ –save”将依赖项添加到package.json文件中
请注意，如果您想向Angular用户添加任何特定版本，请使用以下命令：

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

为了使用任何组件，请在app.module.ts文件中导入该组件

将Imported类添加到app.moule.ts @NgModule部分的“ imports”部分

现在，我们可以在项目中开始使用它了。
为材料组件选择一个特定的选择器。
转到app.component.html文件或要在其中添加“材质组件”的组件的另一个模板，向其中写入选择器代码。

保存所有文件，然后使用以下命令启动应用程序：

ng serve

这将减少您从根本上实施组件的工作量。

将卡组件添加到您的角度项目中的示例：

• 安装角度
• 使用以下命令创建一个新的Angular项目：

  ng new GfGMaterialCardExample
  

• 您将被问到两个问题，如下所示：
  1. 您想添加角度路由吗?
  2. 您想使用哪种样式表格式? (使用箭头键)

  按Enter键2次以使用默认设置

• 更改目录级别，转到项目文件夹。

  cd GfGMaterialCardExample
  

• 安装Angular Material npm软件包(@ 8.0.0与Angular 8兼容，根据您使用的Angular版本添加Angular组件)，还要安装Angular CDK：

  npm install --save angular-material@8.0.0
  npm install --save @angular/cdk@^8.2.3
  

  

• 将卡组件导入添加到app.module.ts文件，如下所示：

  

• app.component.html文件中的所有样板代码，然后添加以下代码：

  Geeks For Geeks - Angular Material Card Example 
  

• 在app.component.css文件中添加要应用的CSS代码：

  mat-card {
      color: green;
      border:1px solid black;
  }
  

• 使用ng serve命令启动应用程序：