极客教程在Angular应用程序中添加Angular材料组件
Angular Material为Angular提供设计组件。这是由Angular团队建立和维护的。它为Angular开发者提供了通用的UI组件和工具，以帮助建立他们自己的自定义组件。作为用户，我们可以使用他们提供的npm包将其与我们的Angular应用程序集成。
Angular Material还提供了CDK，以便整合常见的交互模式。
提供的一些组件的清单是：
- 形式控制
- Navigation
- Layout
- 按钮和指示器
- 数据表
- Popups
- Modals
在你的应用程序中添加材料组件的步骤：
- Install Angular
- 创建一个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文件中导入该组件。
- 在你的app.module.ts @NgModule部分的 “imports “中添加导入的类。
- 现在，我们可以开始在我们的项目中使用它。
为材料组件选择一个特定的选择器。
进入app.component.html文件或其他你想添加材料组件的组件模板，在其中写入选择器代码。 - 保存所有的文件，然后使用启动应用程序。
ng serve
- 这将减少你从基础上实现该组件的努力。
在你的angular项目中添加卡片组件的例子：
- Install Angular
- 创建一个新的Angular项目，使用。
ng new GfGMaterialCardExample
- 你将被问到2个问题，如下所示。
1.你想添加Angular路由吗？
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命令启动应用程序。
