前言
随着前端技术的不断发展，越来越多的开发者开始使用 Angular 框架来构建自己的应用程序。而在 Angular 中，Material Design 是一种非常流行的设计语言，它可以使你的应用程序看起来更加现代化和美观。为了实现这种效果，你需要使用一些 Material Design 组件库。本文将介绍两个比较流行的 Angular Material Design 组件库：ngx-materialize 和 Angular Materialize。
ngx-materialize
ngx-materialize 是一个基于 Materialize CSS 的 Angular 组件库。它提供了一组 Angular 组件，可以帮助你快速构建 Material Design 风格的应用程序。ngx-materialize 的组件非常丰富，包括表单、卡片、导航、模态框等等。同时，它还提供了一些有用的指令，例如 ng2-materialize-autocomplete，可以帮助你快速实现自动完成功能。
ngx-materialize 的安装非常简单，你只需要使用 npm 命令即可：
npm install ngx-materialize --save
安装完毕后，你需要在你的 Angular 应用程序中引入 ngx-materialize 模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - -------------- - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
--------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在你的 HTML 模板中，你就可以使用 ngx-materialize 的组件了：
<button mz-button>Click me!</button>
Angular Materialize
Angular Materialize 是另一个基于 Materialize CSS 的 Angular 组件库。它也提供了一组 Angular 组件，可以帮助你快速构建 Material Design 风格的应用程序。与 ngx-materialize 不同的是，Angular Materialize 的组件更加简单，而且更加易于使用。例如，你可以使用 mat-card 组件来创建一个卡片：
-- -------------------- ---- -------
----------
-----------------
-------------------- ----------------------
----------------------- ----------------------------
------------------
---- -------------- ----------
------------------
---- -------
-------------------
------------------
------- --------------------------
-------------------
-----------与 ngx-materialize 类似，Angular Materialize 的安装也非常简单，你只需要使用 npm 命令即可：
npm install angular-materialize --save
安装完毕后，你需要在你的 Angular 应用程序中引入 angular-materialize 模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ----------------- - ---- ----------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -总结
无论你是使用 ngx-materialize 还是 Angular Materialize，这两个组件库都可以帮助你快速构建 Material Design 风格的应用程序。它们的安装和使用都非常简单，你只需要按照文档中的步骤即可。当然，如果你想要更深入地了解这些组件库，你还可以查看它们的源代码并进行自定义修改。
示例代码：
-- -------------------- ---- -------
---- --------------- -- ---
------- --------------- ------------
---- ------- ----------- -- ---
----------
-----------------
-------------------- ----------------------
----------------------- ----------------------------
------------------
---- -------------- ----------
------------------
---- -------
-------------------
------------------
------- --------------------------
-------------------
-----------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657690b4d2f5e1655dfde70c