Angular Material 是由 Angular 官方支持的 Material Design 风格的组件库，它提供了一套可重用的 UI 组件，可以轻松地为 Angular 应用程序添加美观且易于使用的 UI。在本文中，我们将介绍如何在 Angular 应用程序中使用 Angular Material 组件，包括如何安装、导入和使用这些组件。
安装 Angular Material
安装 Angular Material 非常简单，首先需要使用 npm 安装 Angular Material，打开终端并运行以下命令：
npm install --save @angular/material @angular/cdk @angular/animations
上面的命令将安装 Angular Material、Angular CDK 和 Angular 动画，这些都是必需的依赖项。
导入 Angular Material 模块
一旦你安装了 Angular Material，你就可以将它们导入到你的应用程序中，以便在组件中使用它们。要使用 Angular Material 的组件，你需要导入所需的模块，例如，如果你想使用一个按钮组件，则需要导入 MatButtonModule 模块。以下是导入所需模块的示例：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - --------------- - ---- ---------------------------
------ - -------------- - ---- --------------------------
------ - ------------- - ---- -------------------------
-----------
-------- -
----------------
---------------
-------------
--
-------- -
----------------
---------------
-------------
-
--
------ ----- -------------- - -在上面的示例中，我们导入了 MatButtonModule、MatInputModule 和 MatCardModule 模块，并将它们加入了 imports 数组中。我们还将这些模块添加到 exports 数组中，以便我们可以在其他组件中使用它们。
使用 Angular Material 组件
在导入了所需的模块后，我们就可以在组件中使用 Angular Material 组件了。例如，以下是如何在组件中使用一个按钮组件的示例：
<button mat-button>Click me!</button>
在上面的示例中，我们使用 mat-button 指令创建了一个按钮组件，并在按钮文本中添加了一些文本 “Click me!”。
除了按钮之外，Angular Material 还提供了许多其他组件，例如输入框 (mat-input)、卡片 (mat-card)、对话框 (mat-dialog) 等等。可以在 Angular Material 官方网站上查看完整的组件列表。
示例代码
以下是一个简单的组件，它使用 Angular Material 的按钮组件和输入框组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------------------
--------- -
-----
----------
-----------------
----------------------- -------- ---------------------------
------------------
------------------
----------------
------ -------- ------------------ ---- ------
-----------------
------- ----------------- ------------------- --------------
-------------------
-----------
------
-
--
------ ----- ---------------------- - -在上面的示例中，我们使用 mat-card、mat-card-header、mat-card-title、mat-form-field、mat-input 和 mat-raised-button 组件创建了一个带有输入框和按钮的卡片组件。
结论
Angular Material 是一个非常有用的组件库，它提供了一套美观且易于使用的 UI 组件，可以加速我们开发 Angular 应用程序的过程。在本文中，我们讨论了如何安装、导入和使用 Angular Material 组件，并提供了示例代码供参考。希望本文对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672d9ff8eedcc8a97c8577ce