Diffrent libraries for Angular UI

Posted By :Nikita Agarwal |30th May 2019

Angular is a best known framework with best tooling practices designed with it. As React and Vue js libraries , angular  allows the use of component and  spliiting the ui into mutliple, separated and resusable pieces.

 

There are a lot of libraries available that support angular2+ versions, some are also for the older versions for angular. These libraries are very helpful to use along with the angular to make the UI better than before.

 

Some of them are listed below:

 

1.Material2

This is basically Angular's official component library that uses Google's material design-build with typescript and angular. The UI components in this library serve as an example of how to write angular code in the best efficient manner following all angular practices.

=>Steps to install the  library
1.npm install --save @angular/material @angular/cdk @angular/animations

                     OR
  yarn add @angular/material @angular/cdk @angular/animations

2.Import the module in your app-module file.
3.To get started with the prebuilt theme, include one of Angular Material's prebuilt themes globally in your application. If you're using the Angular CLI, you can add this to your styles.css:
  
  @import "[email protected]/material/prebuilt-themes/indigo-pink.css";

2.NGX Bootstrap

  This library contains all the core Bootstrap componets for angular which supports both mobile and desktop view with efficiency.
=>Steps to install NGX

1.npm install ngx-bootstrap --save

2.<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

3.PRIME NG

A very comprehensive component including over 70 UI components with different themes from material to flat design. Fox and more organizations, this library is an interesting option to consider.

=>Steps to use PRIME-NG

1.npm install primeng --save
npm install primeicons --save

2.import {AccordionModule} from 'primeng/accordion';     //accordion and accordion tab
import {MenuItem} from 'primeng/api';                 //api


=>For Animations install

npm install @angular/animations --save

 

 

4. NG Bootstrap

At high demand and replacing angular-UI bootstrap that is no longer maintained, the popular library provides Bootstrap 4 components for Angular. This libary provides high testing coverage and no third-party JS dependencies.

5. Onsen UI
Onsen-UI is supposed to be a popular library for hybrid and mobile web apps for Android, iOS using Javascript. Onsen-UI for Angular provides components with Material and Flat designs, with binding for Angular.
This is mainly used for development with ANgularJS

AngularJS bindings for Onsen UI provide AngularJS directives that enhance core Web Components and expose an AngularJS-like API to interact with them.


=>Steps to install
1.npm install angularjs-onsenui


6.NG-ZORRO
BUild in TypeScript with complete define types, the NG- ZORRO components aim to provide enterprise-class UI based on Ant Design. This Chinese-made library is an interesting option for web applications.

 

7.NG-LIGHTING

Angular components built for use with the Salesforce Lightning Design System. These stateless functional components depend only on their input properties, to provide improved performance and enhanced flexibility.

8. NG Semantic-UI

Angular UI building blocks are based on Semantic-UI. With nearly about 27 components, this library makes the popular Semantic-UI interface available as a set of components for Angular applications.

References:

https://onsen.io/v2/guide/angular1/

https://valor-software.com/ngx-bootstrap/#/documentation#getting-started

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


About Author

Nikita Agarwal

Nikita Agarwal is a front-end developer and have a good knowledge of HTML , CSS ,Javascipt and Bootstrap and Angular

Request For Proposal

Sending message..

Ready to innovate ? Let's get in touch

Chat With Us