2020年听过很多同行都说Vue、React、Angula前端三大框架，现在是Vue的天下了。我觉得如果这样理解就太片面了，毕竟每个框架都有自己的优缺点。今天就给大家分享几个在Angular开发中能快速提升开发效率的UI组件库。

1、Angular/Material

Angular官方出品的 Material Design 风格的UI组件库。

https://material.angular.io/

https://github.com/angular/components

安装

$ npm i @angular/material -S

使用

// 引入组件
import { NgModule } from '@angular/core';
import { MatButtonModule, MatCheckboxModule } from '@angular/material';

@NgModule({
  ...
  imports: [MatButtonModule, MatCheckboxModule],
  ...
})
export class AppModule { }

// 模板中使用
<button mat-button>Basic</button>
<mat-checkbox class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox>

2、NG-ZORRO

阿里巴巴团队推出的 Ant Design 风格Angular实现，主要用于企业级中后台产品。

Ant Design UI 的 Angular 实现，开发和服务于企业级中后台产品，开箱即用的高质量 Angular 组件。

https://ng.ant.design

https://github.com/NG-ZORRO/ng-zorro-antd

安装

$ npm i ng-zorro-antd -S

使用

// 引入组件
import { NgModule } from '@angular/core';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    NzButtonModule
  ]
})
export class AppModule { }

// 模板中使用
<button nz-button nzType="primary">Primary</button>

3、Element-Angular

饿了么团队出品的基于 Angular.js 桌面端组件库。

目前用户活跃度不高，因此，功能还不够完善，不够成熟。不过既然是饿了么团队开发的，可以尝试使用。

https://element-angular.faas.ele.me/

https://github.com/ElemeFE/element-angular

安装

$ npm i element-angular -S

使用

import { BrowserModule } from '@angular/platform-browser'
// import module
import { ElModule } from 'element-angular'

// if you use webpack, import style
import 'element-angular/theme/index.css'

@NgModule({
  imports: [
    BrowserModule,
    ElModule.forRoot(),
    ...
  ],
    ...
  bootstrap: [ExAppComponent],
})

// components
template: '<el-button>Hello World</el-button>'

4、PrimeNG

一套丰富的 UI 组件库，拥有80多种组件。

https://www.primefaces.org/primeng/

https://github.com/primefaces/primeng/

安装

$ npm i primeng primeicons -S

使用

// 引入组件
import { NgModule } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ButtonModule
  ]
})
export class AppModule { }

// 模板中使用
<button pButton type="button" label="Click" ></button>
<p-button label="Click" ></p-button>

5、Covalent

基于 Teradata 平台构建的 Material 风格的一套丰富 UI 组件库。

https://teradata.github.io/covalent/

https://github.com/teradata/covalent/

安装

$ npm i @covalent/core -S
## (optional) Additional Covalent Modules installs
$ npm i @covalent/http @covalent/highlight @covalent/markdown @covalent/dynamic-forms @covalent/echarts -S

使用

import { NgModule } from '@angular/core';
import { CovalentLayoutModule } from '@covalent/core/layout';
import { CovalentStepsModule  } from '@covalent/core/steps';
/* any other core modules */
// (optional) Additional Covalent Modules imports
import { CovalentHttpModule } from '@covalent/http';
import { CovalentHighlightModule } from '@covalent/highlight';
import { CovalentMarkdownModule } from '@covalent/markdown';
import { CovalentDynamicFormsModule } from '@covalent/dynamic-forms';
import { CovalentBaseEchartsModule } from '@covalent/echarts/base';
// other imports 
@NgModule({
  imports: [
    CovalentLayoutModule,
    CovalentStepsModule,
    // (optional) Additional Covalent Modules imports
    CovalentHttpModule.forRoot(),
    CovalentHighlightModule,
    CovalentMarkdownModule,
    CovalentDynamicFormsModule,
    CovalentBaseEchartsModule,
  ],
  ...
})
export class AppModule { }

6、Ngx-Bootstrap

基于 Bootstrap 风格的 Angular 组件库。

https://valor-software.com/ngx-bootstrap

https://github.com/valor-software/ngx-bootstrap

安装

$ npm i ngx-bootstrap -S

使用

import { NgModule } from '@angular/core';
import { TooltipModule } from 'ngx-bootstrap/tooltip';

@NgModule({
  ...
  imports: [TooltipModule.forRoot(),...]
  ...
})
export class AppModule { }

// 模板中使用
<button type="button" class="btn btn-primary"
        tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Simple demo
</button>

这次就分享到这里，如果小伙伴们有比较好的Angular组件库，可以在下方进行留言讨论，非常期待你的分享！

?? 最后

如果觉得这篇文章对你有帮助，点个「关注/转发」，让更多的人也能看到你的分享！