15 Free & Open-Source Angular Components
Tags: webdev, angular, design, codequality
Published: 2020-03-13 12:01:46

######This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article.

***

Angular is a very popular Javascript web application framework maintained by Google. It is open-source and it is mostly used in developing single-page applications. What is nice about this free framework is the fact that designers and web developers can work in parallel as HTML is used for templating. While Web designers can create user interfaces, the developers tie user interface components with data models by using declarative binding syntax.

But let's see more about **Angular components**:


## **What are the components in Angular?**

The Angular Components are a very important part of an Angular web application:



*   Angular Components define views, which are sets of screen elements that Angular can choose among and modify according to your program logic and data.
*   Each component defines a class that contains application data and logic and is associated with an HTML _template_ that defines a view to be displayed in a target environment.
*   They are a piece of code that may or may not be dependent on another piece of code.
*   They are visible to the end-user and can be reused many times in an application.
*   A component consists of Class, Template, and Metadata.

Every Angular application has at least one component, the _root component_ that connects a component hierarchy with the page document object model (DOM).


![Material Dashboard Pro Laravel](https://creativetimblog.com/blog/wp-content/uploads/2020/03/angular-components.png)

[Source](https://angular.io/guide/architecture-components)

Now, we've gathered some useful** free and open-source** Angular components and we are presenting it in a list for you to help your research process when developing web apps based on Angular. You can also find awesome components from free angular templates [here.](https://www.creative-tim.com/templates/angular-free?ref=devto)


## **Angular Components Examples**


## **1.  [Material Angular](https://material.angular.io/)**

[Angular Material](https://github.com/angular/components) comprises a range of components that implement common interaction patterns according to the Material Design specification.

Components:



*   Form controls
*   Navigation
*   Layout
*   Buttons and Indicators
*   Popups and Modals
*   Data table

[![Material Angular](https://creativetimblog.com/blog/wp-content/uploads/2020/03/material-angular-components-1024x555.png)](https://material.angular.io/)

[Download |](https://github.com/angular/components)   [Live Preview |](https://material.angular.io/) | [Get Hosting](https://m.do.co/c/276af09d9975)


## **2. [Prime NG](https://www.primefaces.org/primeng/)**

[Prime NG](https://github.com/primefaces/primeng) is an Angular UI Component Library featuring elegant, high-performance, accessible, and fully customizable UI Components. All widgets are open source and free to use under MIT License.

Features:



*   80+ Components
*   Open Source
*   Themes: a variety of options including material and flat design
*   Templates: Professionally designed highly customizable native Angular CLI application templates to get started in no time
*   Mobile: optimized responsive design elements

[![Prime NG](https://creativetimblog.com/blog/wp-content/uploads/2020/03/primeng-angular-components-1024x545.png)](https://www.primefaces.org/primeng/)

[Download |](https://github.com/primefaces/primeng)   [Live Preview](https://www.primefaces.org/primeng/) | [Get Hosting](https://m.do.co/c/276af09d9975)


## **[3. BLK Design System Angular](https://www.creative-tim.com/product/blk-design-system-angular?ref=devto)**

[BLK Design System Angular](https://demos.creative-tim.com/blk-design-system-angular/?ref=devto) is a free Angular Design System for Bootstrap 4 and Angular. It is open-source, free and it features many components that can help you create amazing websites. All components can take variations in color, that you can easily modify using SASS files. This Angular Design System is coming with prebuilt examples, so the development process is seamless, switching from our pages to the real website is very easy to be done.

Features:



*   70 Handcrafted [Elements](https://demos.creative-tim.com/blk-design-system-angular/#/documentation/alerts?ref=devto)
*   4 Customized [Plugins](https://demos.creative-tim.com/blk-design-system-angular/#/documentation/datepicker?ref=devto)
*   3 [Example Pages](https://demos.creative-tim.com/blk-design-system-angular/?ref=devto)
[![BLK Design System Angular](https://creativetimblog.com/blog/wp-content/uploads/2020/03/blk-design-system-angular-components.jpg)](https://www.creative-tim.com/product/blk-design-system-angular?ref=devto)

[Download |](https://www.creative-tim.com/product/blk-design-system-angular?ref=devto)   [Live Preview](https://demos.creative-tim.com/blk-design-system-angular/?ref=devto) | [Get Hosting](https://m.do.co/c/276af09d9975)


## **4. [Essential JS 2 for Angular by Syncfusion](https://ej2.syncfusion.com/home/angular.html)**

[Essential JS 2 for Angular](https://github.com/syncfusion/ej2-angular-samples) is a modern Angular UI Components library that has been built from the ground up to be lightweight, responsive, modular, and touch-friendly. It is written in TypeScript and has no external dependencies. It also includes complete support for React, Vue, ASP.NET MVC, and ASP.NET Core frameworks.

Components:



*   Grids & Inputs
*   Editors & Forms
*   Dropdowns & Navigation
*   Data Visualization & Calendars
*   Layout & Viewer
*   Buttons & Notifications

[![Essential JS 2 for Angular by Syncfusion](https://creativetimblog.com/blog/wp-content/uploads/2020/03/essential-angular-components-1024x569.png)](https://ej2.syncfusion.com/home/angular.html)

[Download |](https://github.com/syncfusion/ej2-angular-samples)   [Live Preview](https://ej2.syncfusion.com/home/angular.html) | [Get Hosting](https://m.do.co/c/276af09d9975)  

## **5. [NGX Materialize](https://github.com/sherweb/ngx-materialize)**

[NGX Materialize](https://github.com/sherweb/ngx-materialize) is an Angular wrap around Materialize library, a responsive CSS/JS framework that implements Material Design specifications from Google. The main purpose of this library is to simplify the usage of Materialize within the Angular framework which makes it more dynamic.

Features:



*   Simplify components usage
*   Initialize components automatically
*   Handle Angular "quirks" with Materialize library
*   Offer component injection when possible
*   Provide a MediaService that allows customization according to viewport size
*   Add support for ReactiveForm with validation

[![NGX Materialize](https://creativetimblog.com/blog/wp-content/uploads/2020/03/ngx-materialize-angular-components-1024x519.png)](https://github.com/sherweb/ngx-materialize)

[Download |](https://github.com/sherweb/ngx-materialize)   [Live Preview](https://github.com/sherweb/ngx-materialize) | [Get Hosting](https://m.do.co/c/276af09d9975)  


## **[6. Amexio NG Extensions](https://www.npmjs.com/package/amexio-ng-extensions)**

[Amexio](https://amexio.tech/) is a rich set of 160+ Angular 4+ UI Components powered by HTML5 & CSS3 for Responsive Web Design & 80+ built-in Material Design Themes. Components include Form components, charts, maps, dashboards, Tabs, Grids, Trees, Layouts, etc with Accessibility support, Animation effect and Directives. It includes D3 Charts support with Amexio Drillable Charts option.

Features:



*   170+ Components
*   Drag & Drop Widget
*   Responsive Design
*   Reactive Forms
*   Layouts, CSS3 Grids
*   89 Material Themes
*   D3 Charts / Dashboards

[![Amexio NG Extensions](https://creativetimblog.com/blog/wp-content/uploads/2020/03/amexio-angular-components-1024x582.png)](https://www.npmjs.com/package/amexio-ng-extensions)

[Download |](https://amexio.tech/)   [Live Preview](https://www.npmjs.com/package/amexio-ng-extensions) | [Get Hosting](https://m.do.co/c/276af09d9975) 


## **7. [Angular Chart JS](https://jtblin.github.io/angular-chart.js/)**

[Angular Chart JS](https://github.com/jtblin/angular-chart.js) includes reactive, responsive, beautiful charts for AngularJS based on Chart.js. They are responsive and easy to customize.

Chart types:



*   Line Chart
*   Bar Chart
*   Doughnut Chart
*   Radar Chart
*   Pie Chart
*   Polar Area Chart
*   Horizontal Bar Chart
*   Bubble Chart
*   Dynamic Chart
*   Reactive Chart
*   Bar line Chart

[![Angular Chart JS](https://creativetimblog.com/blog/wp-content/uploads/2020/03/angular-chart-angular-components-1024x582.png)](https://jtblin.github.io/angular-chart.js/)

[Download |](https://github.com/jtblin/angular-chart.js)   [Live Preview](https://jtblin.github.io/angular-chart.js/) | [Get Hosting](https://m.do.co/c/276af09d9975)  


## **8. [Nebular 4.0](https://akveo.github.io/nebular/)**

[Nebular](https://github.com/akveo/nebular/) is a customizable Angular 8 UI Library with a focus on beautiful design and the ability to adapt it to your brand easily. It comes with 4 stunning visual themes, a powerful theming engine with runtime theme switching and support of custom CSS properties mode. Nebular is based on Eva Design System specifications.

Features:



*   4 Visual Themes, including new Dark easily customizable to your brand
*   35+ Angular UI components with a bunch of handy settings and configurations
*   Configurable options - colors, sizes, appearances, shapes, and other useful settings
*   3 Auth strategies and Security - authentication and security layer easily configurable for your API
*   Powerful theming engine with custom CSS properties mode
*   SVG Eva Icons support - 480+ general-purpose icons

[![Nebular 4.0](https://creativetimblog.com/blog/wp-content/uploads/2020/03/nebular-angular-components-1024x577.png)](https://akveo.github.io/nebular/)

[Download |](https://github.com/akveo/nebular/)   [Live Preview](https://akveo.github.io/nebular/) | [Get Hosting](https://m.do.co/c/276af09d9975)  


## **9. [Snotify Notification Center](https://github.com/artemsky/ng-snotify)**

[Snotify](https://artemsky.github.io/ng-snotify/) is a Angular 2+ Notification Center.

Features:



*   9 types of toast notifications (async, confirm, prompt and more...)
*   Ability to create toasts in different positions at the same time
*   Many config options (icons, backdrop, timeout, position and much more)
*   Custom fully controlled styling including animations
*   The repository includes 3 different styles. So you can use on of them, or create your own.
*   Callbacks
*   Custom HTML
*   4.3KB minified and gzipped

[![Snotify Notification Center](https://creativetimblog.com/blog/wp-content/uploads/2020/03/snotify-angular-components-1024x582.png)](https://artemsky.github.io/ng-snotify/)

[Download |](https://github.com/artemsky/ng-snotify)   [Live Preview](https://artemsky.github.io/ng-snotify/) | [Get Hosting](https://m.do.co/c/276af09d9975)  


## **10. [Dragula](https://github.com/bevacqua/dragula)**

[Dragula](http://bevacqua.github.io/angularjs-dragula/) is a drag and drop library for Angular.

Features:



*   Super easy to set up
*   No bloated dependencies
*   Figures out sort order on its own
*   A shadow where the item would be dropped offers visual feedback
*   Touch events!
*   Seamlessly handles clicks _without any configuration_

[![Dragula](https://creativetimblog.com/blog/wp-content/uploads/2020/03/dragula-angular-components-1024x547.png)](https://github.com/bevacqua/dragula)

[Download |](https://github.com/bevacqua/dragula)   [Live Preview](http://bevacqua.github.io/angularjs-dragula/) | [Get Hosting](https://m.do.co/c/276af09d9975)  


## **11. [Fuel UI](https://github.com/FuelInteractive/fuel-ui)**

[Fuel UI](http://fuelinteractive.github.io/fuel-ui/#/) is a set of UI components for use with Angular 2 and Bootstrap 4.

Components:



*   Accordion
*   Alert & Modal
*   Carousel & TableSortable
*   Dropdown & InfiniteScroller
*   OffCanvasMenu & Pagination
*   Progressbar & Slider
*   Tabs & Tags
*   TextExpander
*   TimePicker & DatePicker

[![Fuel UI](https://creativetimblog.com/blog/wp-content/uploads/2020/03/fuel-ui-angular-components-1024x545.png)](https://github.com/FuelInteractive/fuel-ui)

[Download |](https://github.com/FuelInteractive/fuel-ui)   [Live Preview](http://fuelinteractive.github.io/fuel-ui/#/) | [Get Hosting](https://m.do.co/c/276af09d9975)  


## **12. [Contact List](https://github.com/housseindjirdeh/angular2-redux-contact-list)**

[It](https://embed.plnkr.co/ns1tfi/) is a simple contact list application built with Angular 2, Immutable.js and Redux.

[![Contact List](https://creativetimblog.com/blog/wp-content/uploads/2020/03/contact-list-angular-components.gif)](https://github.com/housseindjirdeh/angular2-redux-contact-list)

[Download |](https://github.com/housseindjirdeh/angular2-redux-contact-list)   [Live Preview](https://embed.plnkr.co/ns1tfi/) | [Get Hosting](https://m.do.co/c/276af09d9975)  


## **13. [Confirmation Popover](https://github.com/mattlewis92/angular-confirmation-popover)**

[It ](https://mattlewis92.github.io/angular-confirmation-popover/)is a simple angular 5.0+ directive to display a bootstrap styled confirmation popover when an element is clicked.

[![Confirmation Popover](https://creativetimblog.com/blog/wp-content/uploads/2020/03/confirmation-popover-angular-components-1024x371.png)](https://github.com/mattlewis92/angular-confirmation-popover)


[Download |](https://github.com/mattlewis92/angular-confirmation-popover)   [Live Preview](https://mattlewis92.github.io/angular-confirmation-popover/) | [Get Hosting](https://m.do.co/c/276af09d9975)  


## **14. [Grid Directive](https://github.com/BTMorton/angular2-grid)**

Angular 2 Grid is a drag/drop/resize grid-based plugin directive for [Angular 2](http://angular.io/).


[![Grid Directive](https://creativetimblog.com/blog/wp-content/uploads/2020/03/grid-angular-components-1024x582.png)](https://github.com/BTMorton/angular2-grid)

[Download |](https://github.com/BTMorton/angular2-grid)   [Live Preview](https://bmorton.co.uk/angular/) | [Get Hosting](https://m.do.co/c/276af09d9975) 


## **15. [Lazyload-image](https://github.com/tjoskar/ng-lazyload-image)**

[Lazyload-image](https://bmorton.co.uk/angular/) is a small library for lazy loading images for Angular apps with zero dependencies

[![Lazyload-image](https://creativetimblog.com/blog/wp-content/uploads/2020/03/lazy-load-image-angular-components-1024x560.png)](https://github.com/tjoskar/ng-lazyload-image)

[Download |](https://github.com/tjoskar/ng-lazyload-image)   [Live Preview](https://bmorton.co.uk/angular/) | [Get Hosting](https://m.do.co/c/276af09d9975) 

Now that you've checked all these Angular components are you ready to start your dev project?

Let us know if you have other examples in mind!