1.Angular Material

Angular Material 是由 Google 開發的一款工具，是適合與 Angular 框架一起使用的 UI/UX 組件庫。Angular Material 提供功能性 UI 組件、樣式和動畫，以創建專業和現代化的界面。組件包括表單元素、導航元素、數據表和圖形等功能。Angular Material 可幫助您為 Angular 應用程序創建高質量且移動友好的界面。

吸引用戶并訪問應用程序中可用的項目或組件。它還可以幫助我們設計具有獨特樣式和形狀的應用程序。

這些組件使應用程序或網站更加一致，并使設計具有響應性。它將成功設計的經典原則與創新和技術相結合。

谷歌于 2014 年開發了 Angular Material。當時，它被標記為 AngularJS，旨在使應用程序更具吸引力和更快的性能。谷歌從頭開始重寫代碼并刪除了 JS，然后在 2016 年 9 月將其命名為 Angular Material。UI/UX 組件被稱為 Angular Materials。

安裝

您可以使用 NPM 或 Yarn 安裝 Angular Material，如下所示。

// with npm
npm i @angular/material


// with yarn
yarn add @angular/material

2.NGX  Bootstrap

NGX Bootstrap 是 Angular 框架的 UI 組件庫。它為 Angular 應用程序適配了 Bootstrap 4 風格，并為 Angular 應用程序提供了強大而靈活的 UI 組件。NGX Bootstrap 包括流行的 UI 組件，例如模態窗口、旋轉木馬、下拉菜單、選項卡、警報和 toast 通知。Angular 開發人員經常首選它，因為它易于使用和配置。

所有組件均采用模塊化設計。自定義模板，樣式可以輕松應用。

所有組件都是可擴展和適應性強的，并且在桌面和移動設備上以相同的易用性和性能工作。

• 所有組件都使用最新的代碼維護和可讀性風格指南和準則。
• 所有組件都經過全面的單元測試，并支持最新的角度版本。
• 所有組件都有豐富的文檔和良好的編寫。
• 所有組件都有多個工作演示來展示多種類型的功能。

ngx bootstrap 是一個開源項目。由麻省理工學院許可證支持。

安裝

您可以使用 NPM 或 Yarn 安裝 NGX Bootstrap，如下所示。

// with npm
npm i ngx-bootstrap


// with yarn
yarn add ngx-bootstrap

3.NG Bootstrap

ng-bootstrap 是一個開源存儲庫，它提供了幾個使用 Bootstrap 4 CSS 構建的原生 Angular 小部件。如您所知，Bootstrap 是最流行的 CSS 框架之一，用于使用 HTML、CSS 和 JavaScript 庫創建時尚現代的應用程序。

要在 Angular 應用程序中使用 Bootstrap 框架，我們之前必須使用 bootstrap CSS 和 JavaScript 文件，但是“ng-bootstrap”為我們提供了在 Angular 應用程序中沒有任何 JS 文件的情況下使用它的最佳方法。

“ng-bootstrap”提供了一個可以加載到我們的 Angular 應用程序中的模塊，它為我們提供了原生的 Angular 組件和小部件，我們可以在使用其他 Angular 提供的組件或我們的自定義組件時使用它們。

由于“ng-bootstrap”是一個封裝了所有 Bootstrap 功能的模塊，因此無需在我們的 Angular 應用程序中使用任何其他第三方庫。因此，不依賴于 jQuery 甚至 Bootstrap 的 JavaScript 庫。

Bootstrap 4.0.0（僅 CSS 文件，不需要 Bootstrap.js 和 Bootstrap.min.js）Angular 4+ 和 Bootstrap 4.0.0 都支持所有瀏覽器，具有 CSS 支持的相同瀏覽器交集。

多種小部件可供選擇，包括所有 Bootstrap 小部件。

開發人員可以使用 Bootstrap 組件，如模式、輪播、進度條等。

對 Angular 有基本的了解就足以使用 NG Bootstrap。

組件輕巧且響應迅速。

該庫不依賴于其他依賴項。

所有組件都經過 100% 覆蓋率測試。

大型社區支持。

安裝

您可以使用 NPM 或 Yarn 安裝 NG Bootstrap，如下所示。

// with npm
npm i @ng-bootstrap/ng-bootstrap 


// with yarn
yarn add @ng-bootstrap/ng-bootstrap

4.Angular 的 Onsen UI

Angular 的 Onsen UI 是 Angular 框架的 UI 組件庫。它針對移動應用程序進行了優化，并使用 HTML5 和 CSS 技術進行設計。Angular 的 Onsen UI 為 Angular 應用程序提供移動友好且功能強大的 UI 組件，但也可用于桌面瀏覽器。組件包括流行的 UI 組件，例如，導航元素、表單元素、選項卡、模態窗口和 toast 通知。Angular 的 Onsen UI 是一個選項，它具有簡單易用的 API，可以與 Angular 一起使用。

Onsen UI 是獨立于框架的，這意味著開發人員可以使用或不使用任何 JavaScript 框架來創建應用程序。Onsen UI 還包括額外的連接器包，使其 API 易于與流行的框架一起使用，例如：

• React
• Vue
• AngularJS1
• Angular 2+

Onsen UI 針對移動設備進行了性能優化，因此,適用于移動 Web 應用程序開發。

安裝

您可以使用 NPM 輕松安裝 Onsen UI，如下所示。

// with npm
npm install onsenui ngx-onsenui --save

5.PrimeNG

PrimeNG 是 Angular 框架的 UI 組件庫。PrimeNG 為 Angular 應用程序提供專業和多功能的 UI 組件。組件包括數據表、圖表、滑塊、下拉列表、選項卡、燈箱、樹和許多其他功能性 UI 組件。PrimeNG 旨在提高 Angular 應用程序的性能和用戶體驗，并且易于配置。它還可以與 Angular 一起使用，并提供主題支持。

• 超過 80 種不同的組件。
• 主題設計器可讓您創建自己的主題。
• 任何人都可以輕松開始使用 PrimeNG 提供的專業設計、可定制的模板。
• 200 多個圖標。
• 280 多個 UI 塊。
• 它不斷更新。如果出現任何問題，可以迅速解決。

安裝

您可以使用 NPM 或 Yarn 安裝 PrimeNG，如下所示。

// with npm
npm i primeng


// with yarn
yarn add primeng

6.NG Lightning 

NG Lightning 是一個流行的用于 Salesforce 開發的 Angular 組件庫。該庫依靠輸入功能為最終用戶提供更好的性能。它建立在原生 Angular 組件和閃電設計系統之上。

• 它專注于改進性能和更大的開發靈活性。
• Angular 和 Salesforce 開發方面的專家。
• 用 TypeScript 編寫。

安裝

您可以使用 NPM 安裝 NG Lightning，如下所示。

npm install --save ng-lightning

7. Syncfusion Angular UI 

Syncfusion Angular UI (Essential JS 2) 是基于現代 TypeScript 的真正 Angular 組件的集合。它具有提前 (AOT) 編譯和 Tree-Shaking 支持。所有組件都是從頭開始開發的，具有輕便、響應迅速、模塊化和觸摸友好的特點。

• 為了便于選擇性引用，所有組件都設計為模塊。
• 這些組件支持觸控，適用于多種設備，從而帶來出色的用戶體驗。
• 全球受眾可以使用各種語言和文化的組件。
• 輕的。

安裝

您可以通過 NPM 安裝所需的包。

npm i @syncfusion/ej2-angular-base

8. Clarity

Clarity Design System 是一個開源項目，它將 UX 指南、HTML/CSS 框架和 Angular 組件結合在一起，共同創造非凡的體驗。

可擴展和可定制的組件。

它可以用于任何 web 應用程序，無論 JavaScript 框架如何。

它提供了一組精心設計和實現的數據綁定組件。

安裝

您可以使用 NPM 安裝 Clarity，如下所示。

// with npm
npm i @clr/angular

9.Vaadin UI組件

Vaadin 是一個用于構建 Web 應用程序的 Java 框架，它提供了廣泛的 UI 組件，用于構建響應迅速且用戶友好的界面。一些最常用的 Vaadin UI 組件包括：

• TextField：用于輸入和顯示文本
• Button：用于觸發動作
• ComboBox：用于從選項的下拉列表中進行選擇
• Grid：用于顯示和操作表格數據
• TreeGrid：用于顯示分層數據
• Chart：用于創建交互式圖表和圖形
• TabSheet：用于將內容組織到選項卡中
• SplitPanel：用于將 UI 劃分為多個可調整大小的區域

這些組件是高度可定制的，并且可以使用 CSS 設置樣式以匹配您的應用程序的外觀。

• 響應式布局。
• 您自己有良好的設計系統的基礎。
• 使用常見的輔助技術進行手動測試。
• 它快速、安全地處理服務器-客戶端通信和路由。
• 提供鍵盤導航和屏幕閱讀器支持。

安裝

您可以使用 NPM 安裝 Vaadin，如下所示。

// with npm
npm i @vaadin/vaadin-grid

10.Nebular 

Nebular 是由 Akveo 調用的 UI Kit。它在 Angular 框架上運行，并提供一組現成的組件、主題和工具來創建用戶輸出。Nebular 可幫助您為當前的 Web 應用程序創建現代且令人印象深刻的結果。此外，Nebular 和 Angular 都易于配置和學習。

• 認證層。
• 出色的社區支持。
• 組件具有可配置的樣式。
• 基于EVA設計系統實現。

安裝

您可以使用 NPM 安裝 Nebular，如下所示。

//with npm
npm i node-teradata

結論

在寫這篇文章之前，我有使用其中許多庫的經驗。在這些庫中，對我來說最好的是 primeNG 庫。其他庫也很好，也很成功，但我個人認為 primeNG 庫有更好、更有條理的處理來源，所以它引起了開發者對它們一些興趣。