Angular-2 Component Libraries you must know

Blog Popular Programming

Angular allows you to use components to split your UI into reusable pieces for different purposes. To help get you going, here are 12 popular and useful Angular component libraries you should consider for your next Angular application. These Angular component libraries are meant to be used for Angular 2 and above.

Onsen UI for Angular
Create beautiful high-quality hybrid mobile apps and PWAs the fastest way with Angular and Onsen UI.

Onsen UI for Angular exposes a simple but powerful API. All UI components can be easily plugged into your Angular mobile app. Onsen UI is compatible with both AngularJS and Angular 2+ by sharing the same JavaScript and CSS core. It even supports other libraries like React, jQuery and Vue. Thus, you can easily switch between the libraries and frameworks and still feel at home. Onsen-UI for Angular provides components with Material and Flat designs, with binding for Angular.


VMware-designed Clarity is an open source design system, which draws together Angular components, UX guidelines, and an HTML/CSS framework. Clarity offers a set of data-bound, performant elements along with Angular.

NGX Bootstrap

This library contains all core Bootstrap components powered by Angular. With performance for both Mobile and Desktop, it’s designed with extensibility and adaptability in mind.

NG Lightning

Native Angular components & directives for Lightning Design System.
Built upon next generation frameworks like Angular and Salesforce’s Lightning Design System, We focus on building stateless functional components that depend only on their input properties, guaranteeing better performance, more development flexibility and seamless integration with your application’s requirements.


NG-ZORRO is written in TypeScript with proper define types. The components in NG-ZORRO are to provide an Ant Design-based enterprise-class UI.



Material Design components for Angular. Built by the Angular team to integrate seamlessly with Angular. Angular’s official component library implementing Google’s material design, built with Angular and TypeScript.

Charts for Angular2 based on Chart.js

Chart.js is an HTML5 charts library that leverages the full potential of the HTML5 Canvas element. It has been used by data scientists, health researchers, journalists, media firms and publishers who appreciate interactive charts to provide interactive data to their audience. Chart.js has found its use in slideshows, business meetings, and is frequently implemented in web and mobile apps alike.

NG Bootstrap

Angular widgets built from the ground up using only Bootstrap 4 CSS with APIs designed for the Angular ecosystem. No dependencies on 3rd party JavaScript.

Dragula: Drag and drop so simple it hurts

Although this feature is quite common in desktop application but Dragula makes drag and drop super-simple for web apps as well. Dragula supports a variety of callbacks in order to provide lots of control during and after drag-and-drop execution.

Simple table extension with sort, filter, pagination capabilities

Quite self-explanatory from the title above, it has a nice looking grid-layout, the rows can be filtered, sorted and standard pagination is available.

Angular 2 Directives for Google Maps

Angular 2 Google Maps natively integrates maps into the apps. Visit the demo to appreciate how easy is it to use google map in your angular 2 application.

PrimeNG – The Most Complete User Interface Suite for Angular

PrimeNG is a collection of rich UI components for Angular. It primarily provides these one of a kind components: input forms, data display, layout panels, buttons, layout overlay, data charts, content menus, messaging, multimedia, drag and drop tools, progress bars and custom themes and so on.

Leave a Reply

Your email address will not be published. Required fields are marked *