The Best 25 Angular Components 2020 To Build Cool Web Solutions

We’ve collected the best 25 Angular components for web developers that will help you to build amazing applications faster and easier. See them in the article!

According to StackOverflow Developer Survey 2019, Angular is the second most popular web application framework worldwide and the fourth most wanted to work with. Created by Google and initially released less than 5 years ago, this open-source programming tool has won the hearts of engineers from all over the world.

With strong community support and rich functionality, Angular enables to ensure the seamless user experience and consistency across all devices and platforms from tablet to mobile. Furthermore, specialists—either newbies or experienced—can access numerous Angular perks. In this article, we’ve collected the best 26 Angular components helping to produce amazing software solutions faster and easier. Let’s get started!

1. Angular Material UI component library

Angular Material UI component library

The Angular team created a Material Design UI component library for Angular. Providing many quality elements, it allows programmers to employ them in web applications. Most importantly, this solution comprises a set of tools allowing to produce tailor-made components using common interaction patterns. 

Angular Material offers a variety of components: 

  • Buttons
  • Form controls
  • Navigation
  • Building blocks for presenting content
  • Data tables
  • Popups and modals

What’s more, the library helps to ensure design consistency and seamless user experience across various screens and operating systems that include Windows, macOS (VoiceOver with Safari/Chrome), iOS, Android, Chrome OS (ChromeVox with Chrome). Being clean and well-documented, the code acts as a great example for Angular engineers.

Angular Material UI component library is well-recognized among developers from all over the world. As of the end of January 2020, the library had 19,000 stars on GitHub.

2. NGX-Bootstrap

NGX-Bootstrap

Being an open-source MIT Licensed project, ngx-bootstrap provides a wide range of components, powered by Angular. They involve alerts, taps, buttons, pagination, popover, progress bar, and a lot more. Interactive elements—dropdown menus, modal dialogs, custom tooltips, etc.—are intended to work for touch, mouse, and keyboard users.

So, web developers don't have to use original JavaScript components. Instead, they can drop into their apps Markup and CSS released by Bootstrap. Ngx-bootstrap is constantly being improved with the current 5.3.2 version available on the market.

At the moment, ngx-bootstrap is one of the most popular Angular-based projects with over 5,000 stars on GitHub.

3. Ng2-charts

Ng2-charts

Ng2-charts comprises beautiful charts for Angular2 based on Chart.js. Being MIT licensed Angular project, the library is available in both dark and light themes. It provides one directive—baseChart—for all chart types, and 8 types of charts: line, pie, bar, polarArea, radar, bubble, scatter, and doughnut

By now, ng2-charts has received about 1,700 stars on GitHub.

4. Dragula

Dragula

Dragula enables engineers to simplify and accelerate Angular app development with drag-and-drop technology. Dragula differs from other drag-and-drop libraries and frameworks as it can be applied to not only layout creation but also for actual product content. For instance, it allows programmers to drag the content in every possible direction. 

Currently, Dragula has 1,700 stars on GitHub.

5. Nebular 

Nebular

Nebular is an Angular 8 UI Library with a focus on beautiful design and 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 components, that could be useful for you:

  • Global (Layout, Card, Flip Card, Stepper, Accordion, List, Infinite List)
  • Navigation (Sidebar, Menu, Tabs, Actions)
  • Forms (Input, Button, Checkbox, Toggle, Radio, Select, Datepicker)
  • Modals & Overlays (Popover, Context Menu, Dialog, Toastr, Tooltip, Window)
  • Extra (Global Search, User, Alert, Icon, Spinner, Progress Bar, Badge, Chat UI, Calendar)
  • CDK (Сalendar Kit)
  • Data Table (Tree Grid)

Currently, Nebular has 5,886 stars on GitHub.

 

6. Ng2-file-uploadNg2-file-upload

Although file uploading isn’t something a developer thinks about from the start of app development, it’s an important feature in a major part of applications. 

If your product is intended to have a user profile, chats, messaging, or content sharing options, you need to provide users with a way to upload, download, send, and exchange different files. With The Angular2 File Upload directives, you can easily integrate this functionality.

As of the end of January 2020, Angular file upload has 1,733 stars on GitHub.

7. Ng2-handsontable

Ng2-handsontable

Created in JavaScript, Handsontable is a data grid component with an Excel-like appearance, which works with React, Vue, and Angular. Going under MIT license, ng2-handsontable—Angular 2 directive for Handsontable—integrates with any data source. 

Handsontable comprises a wide range of cool features that include custom buttons, custom borders, data sorting, grouping, scrolling, filtering, checkbox, context menu, header tooltips, data binding and validation. Supported by the product team and GitHub community, it also offers plenty of different plugins helping programmers to make cool software solutions faster.

By now, ng2-handsontable, which acts as an Angular 2+ wrapper for Handsontable, has got 270 stars on GitHub, while Handsontable itself has earned 13,100 stars.

8. ng2-selectng2-select

Created 4 years ago, ng2-select is a native Angular2 user interface component for Select. Coming under MIT-license, it is an Angular-based replacement and enhancement for the native select boxes.


Today, ng2-select has 678 stars on GitHub. Additionally, the product is getting on average 7,900 weekly downloads on Openbase, an app store with millions of open-source packages.

9. Angular Google Maps (AGM)

Angular Google Maps (AGM)

Angular Google Maps is one of the most popular Angular 2 components. Known before as angular2-google-maps, AGM enables software developers to integrate a Google Maps widget into their digital solutions. 

If you just want to try AGM in action, you can employ Plunker that has all the necessary dependencies to work with Angular and Typescript. In addition, the product provides programmers with a well-documented API for making web applications.

As of January 2020, Angular 2+ Google Maps Components have 1,800 stars on GitHub.

10. Ngx-dropdown

Ngx-dropdown

Ngx-dropdown is a simple dropdown for Angular2-based apps using Bootstrap3. If you want to employ it without Bootstrap, just remove the class names. Being an MIT licensed solution, ngx-dropdown is receiving 853 downloads per week on npm.com, an open-source project helping JavaScript developers to easily share packaged modules of code.

Today ngx-dropdown has 71 stars on GitHub.

11. Ngx-progress-bar

Ngx-progress-bar

Ngx-progress-bar is a simple progress bar control for Angular 2 applications that also uses Bootstrap 3 design. Acting as a native component, it doesn’t include jQuery. The tool allows engineers not to apply Bootstrap by creating proper CSS class names.

Now the project has 20 stars on GitHub.

12. Fuel-UI

Fuel-UI

Built by Fuel Travel, a company with extensive experience in the travel marketing industry, Fuel-UI is a rich collection of native Angular 2 components, pipes, directives, and animations for Bootstrap 4.

Fuel-UI provides a large set of UI components for making beautiful web apps that include: accordion, alert boxes, dropdown, modal popups, scroller, menu, pagination, progress bar, sliders, tabs, tags, TextExpander, TimePicker, and more.

By now, Fuel-UI has earned over 300 stars on GitHub.

13. PrimeNG

PrimeNG

 

PrimeNG is a rich component library for UI designers for accelerating the web development process. Released by PrimeTek Informatics, a company with high expertise in making open-source digital UI solutions, PrimeNG provides over 80 components. 

It also has various themes and templates with many options to choose from including Material and Bootstrap design. With touch optimized responsive design elements, PrimeNG enables to ensure an amazing user experience on mobile devices.

For today, PrimeNG is the most complete user interface suite for Angular. A set of components involves accordion, buttons, input forms, dropdown, grid, checkbox, chips, layout panels, layout overlay, charts, menus, scroll panel, paginator, messaging, drag and drop tools, progress bars, sliders, captcha, and many others. 

Being available for free under MIT license, PrimeNG is one of the most well-known UI components libraries for Angular. Today, it has 5,800 stars on GitHub.

14. Ng2-fontawesome

Ng2-fontawesome

Ng2-fontawesome is a directive that helps web development teams to easily implement Font Awesome icons in their Angular-based projects. 

At the moment, Font Awesome is the web's most popular iconic SVG, font, and CSS toolkit. Being one of the leading open-source projects, it provides 1,553 beautiful icons for free and 7,702 Pro icons that you can access in the Pro version.

Font Awesome

Font Awesome allows Pixel-perfect rendering and works with popular frameworks like React, Ember, Vue.js, and Angular. Being available for free, it’s definitely one of the best choices among other icon packages. 

Now, ng2-fontawesome directive has only 21 stars on GitHub, while Font Awesome itself has already received more than 61,900 stars.

15. Angular X fullPage.js

Angular X fullPage.js

This Angular fullPage.js port library serves for making outstanding full-screen scrolling websites (also known as single-page/one-page websites). It works with Angular 2 and above: lately, developers have added support for Angular 7. 

Fullpage.js is compatible with all modern browsers, as well as some outdated ones like Opera 12, Internet Explorer 8, Internet Explorer 9, etc. In addition, it enables touch support for smartphones, tablets, and touch screen computers.

As of January 2020, the project has 273 stars on GitHub.

16. Ngx-easy-table

Ngx-easy-table

Ngx-easy-table is a very convenient module for building and putting tables into websites or web applications. You can employ this Angular solution under different configurations, for instance, create a table with pagination or a table with the search capabilities. 

Representing the easiest Angular table, it contains a variety of pre-built templates—basic, cells, group rows, collapsed rows, checkboxes, filters, footers, No Results template, loading, etc.— with code examples. Ngx-easy-table provides clear installation guidelines and API documentation. Using API, you can control the table's behaviour from the parent component.

Ngx-easy-table has 199 stars on GitHub at the moment. On npmjs.com app store, it is getting 1,093 weekly downloads on average.

17. Ngx-admin

Ngx-admin

Invented by Akveo software development company, ngx-admin is a front-end admin dashboard template with a component-based structure. An administrator panel is based on Angular 8+, Bootstrap 4+, Nebular with Eva Design System support.

With high customization capabilities and numerous UI components, the product provides an ecosystem for making beautiful prototypes and modern applications. Ngx-admin is one of the most popular open-source Angular projects strongly supported by the Angular community. A pleasant bonus is that it’s totally free.

Ng2-admin contains rich functionality (charts, tables, maps, forms, editors, responsive layout, high resolution, etc.) allowing engineers to ensure consistency across all devices from desktop to mobile. It also offers 4 visual themes to choose from (light, dark, cosmic, and corporate) and detailed installation guidelines.

The product comes with 2 dashboards—Internet of Things and e-commerce—and over 40 pages. Using ngx-admin Angular template, you can save more than $33,000 and 480 hours on building a digital solution. 

As of the end of January 2020, this Angular admin dashboard has 19,570 stars on GitHub.


18. Ngx Admin Backend Bundles

Ngx Admin Backend Bundles

With Backend Bundle support (.NET, Node.js, Java etc.), ngx-admin enables full-stack software development. Launched by Akveo, it comes packed with 100+ Angular user interface components, multiple code samples, and REST Backend Services.

This open-source project perfectly suits for commercial and noncommercial purposes, particularly, for creating data management and analytics software. Using Backend Bunde + ngx-admin, you can save up to 300 hours on building mobile and web solutions.

Get 10% coupon code for entire order FQB2BLOG

Check catalog Angular Ngx admin with backend:

  • Java
  • Node
  • .Net, .Net Core
  • Django
  • Python

React Native Mobile (Java, .NET)

19. Ng2-start

Ng2-start

Ng2-start is an Angular 2 starter pack with WebPack. App template development requires time and effort, especially if you begin from scratch. Employing the ng2-start kit, you can facilitate and speed this process up. 

Today, this open-source project has 36 stars on GitHub.

20. Ng2-notifications

Ng2-notifications

Ng2-notifications is an Angular 2 component for native push notifications. The Notification API enables web pages to manage the way how product notifications are displayed to the end customer. The API provides compatibility with the existing notification systems across various platforms.

To this date, this solution has 192 stars on GitHub.

21. Ngx-formly

Ngx-formly

Ngx-formly is a dynamic JSON-powered form library for Angular providing unmatched maintainability to the app's forms. It supports Bootstrap, Material2, Ionic, PrimeNG, Kendo, NativeScript, and NG-ZORRO UI libs. 

Built on top of Angular Reactive Forms, ngx-formly is packed with plenty of cool features that involve automatic forms generation, support for many schemas, and a range of themes out of the box. The library is easy to extend custom field type, wrapper, validation, and extension. 

Ngx-formly has 1,200 stars on GitHub.

22. Ng-lazyload-image

Ng-lazyload-image

 

Ng-lazyload-image is a small library for lazy loading images for Angular-based applications with zero dependencies. With this tool, visual content displays to the user when he or she reaches a certain element on the page. As a result, the website or application load speed is higher.

Currently, ng-lazyload-image has 584 stars on GitHub and is being downloaded on average 11,825 times per week on npmjs.com.

23. Ng2-minimal

Ng2-minimal

Ng2-minimal is a convenient playground for beginners to start working with Angular 2, Typescript, and SystemJs. This repository is intended to serve for learning purposes only. Representing the simplest setup for Angular 2, it provides newbies with a gentle introduction to parts of the framework ecosystem.

Ng2-minimal has 38 stars on GitHub.

24. Ng2-table

Ng2-table

 

Ng2-table is a simple table extension that enabled data sorting, filtering, and pagination for Angular2-based applications. Web developers can easily install ng2-table through an npm package manager or download it in a ZIP file.

This open-source project has 539 stars on GitHub.

25. Ngx-tabs

Ngx-tabs

 

Ngx-tabs is a simple tabs control for Angular 2 web solutions using Bootstrap3. It doesn’t depend on jQuery. The tool is available for free with installation guidelines and code samples.

By now, ngx-tabs open-source project has received 37 stars on GitHub. It is also getting 1,033 weekly downloads on npmjs.com. 

Closing thoughts

As you can see, the Angular framework provides a number of cool Angular components allowing engineers to create great web applications that look stunning on every screen and device. You can choose among a range of tools to find a relevant one to achieve your goal, whether it is the creation of an intuitive beautiful user interface, advanced charts, or complex tables in your data analytics solution, or something else.

If you have questions about web development, Angular functionality, or anything else, feel free to contact the Akveo team. With extensive experience in this field, particularly in building famous open-source products, we’ll be glad to help you.

Get 10% coupon code for entire order FQB2BLOG

NGX admin with any backend, ready-made solution, check the catalog 

 

 

Leave a comment

Please note, comments must be approved before they are published