Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/is2ei/awesome-angular-components

Catalog of Angular 2+ Components & Libraries
https://github.com/is2ei/awesome-angular-components

List: awesome-angular-components

angular awesome-list

Last synced: 3 months ago
JSON representation

Catalog of Angular 2+ Components & Libraries

Awesome Lists containing this project

README 

        
awesome-angular-components

===



[![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)



Yet another curated List of Angular 2+ Components & Libraries. 



:arrow_double_down: - Low maintenance repository  

:coffin: - Archived repository  



## Table of Contents

- [Official resources](#official-resources)

- [Projects using Angular](#projects-using-angular)

- [UI Components](#ui-components)

  - [Calendar](#calendar)

  - [Form](#form)

  - [Table](#table)

  - [Tooltip](#tooltip)

  - [Notification](#notification)

  - [Loader](#loader)

  - [Overlay](#overlay)

  - [Parallax](#parallax)

  - [Icons](#icons)

  - [Menu](#menu)

  - [Minus Plus Input](#minus-plus-input)

  - [Carousel](#carousel)

  - [Charts](#charts)

  - [Time](#time)

  - [Map](#map)

  - [Audio / Video](#audio--video)

  - [Infinite Scroll](#infinite-scroll)

  - [Pull-to-refresh](#pull-to-refresh)

  - [Markdown](#markdown)

  - [PDF](#pdf)

  - [Tree](#tree)

  - [Social Sharing](#social-sharing)

  - [QR Code](#qr-code)

- [Services](#services)



## Official resources

- [angular/components](https://github.com/angular/components) - Component infrastructure and Material Design components for Angular



## Projects using Angular



- [crafted/crafted](https://github.com/crafted/crafted) - Utilities and components to build apps

- [ngxtools/ngx.tools](https://github.com/ngxtools/ngx.tools) - ⚡️Discover any Angular module/library/schematic/package hosted on NPM⚡️

- [oppia/oppia](https://github.com/oppia/oppia) - Tool for collaboratively building interactive lessons.



## Tools



- [Jefiozie/ngx-aws-deploy](https://github.com/Jefiozie/ngx-aws-deploy) - ☁️🚀 Deploy your Angular app to Amazon S3 directly from the Angular CLI 🚀☁️



## UI Components



### Calendar



*Display non-editable events in a Calendar*



- [mattlewis92/angular-calendar](https://github.com/mattlewis92/angular-calendar) - A flexible calendar component for angular 6.0+ that can display events on a month, week or day view.



### Form



*Let the user create & edit data*



#### Date Picker



*Date / datetime / time Picker*



- [akmittal/angular2-datepicker](https://github.com/akmittal/angular2-datepicker) - Angular2 date time picker

- [adibro500/ngx-adibro-datetime-picker](https://github.com/adibro500/ngx-adibro-datetime-picker)

- [albertnadal/ng2-daterange-picker](https://github.com/albertnadal/ng2-daterange-picker) - Light and simple date range picker component for Angular2 based on Material

- [asdftu/ng-time-picker](https://github.com/asdftu/ng-time-picker) - IOS style time-picker for angular

- [ashishgkwd/ngx-mat-daterange-picker](https://github.com/ashishgkwd/ngx-mat-daterange-picker) - Date range picker component based of Angular Material Calendar component and configurable date presets. Packaged using ng-packagr.

- [BhavinPatel04/ngx-datetime-range-picker](https://github.com/BhavinPatel04/ngx-datetime-range-picker) - Angular material datetime range picker with daily, weekly, monthly, quarterly & yearly levels

- [changhuixu/date-range-picker](https://github.com/changhuixu/date-range-picker) - An angular component for Date Range Picker using ng-bootstrap

- [cswarb/ngx-aircal](https://github.com/cswarb/ngx-aircal) - ngx-aircal is a modern, configurable and lightweight Angular date range picker.

- [dalelotts/angular-bootstrap-datetimepicker](https://github.com/dalelotts/angular-bootstrap-datetimepicker) - Native Angular date/time picker component styled by Twitter Bootstrap

- [DanielYKPan/date-time-picker](https://github.com/DanielYKPan/date-time-picker) - Angular Date Time Picker (Responsive Design)

- [djsiddz2/djsiddz-dtp](https://github.com/djsiddz2/djsiddz-dtp) - Date Time Picker module for your Angular 5 apps

- [fingerpich/jalali-angular-datepicker](https://github.com/fingerpich/jalali-angular-datepicker) - Highly configurable jalali (shamsi, khorshidi, persian) date picker built for Angular ( 2 or more ) applications

- [h2qutc/ngx-mat-datetime-picker](https://github.com/h2qutc/ngx-mat-datetime-picker) - Angular Material Datetime Picker

- [jkuri/ng-daterangepicker](https://github.com/jkuri/ng-daterangepicker) - Angular Date Range Picker inspired by PayPal's one

- [kekeh/angular-mydatepicker](https://github.com/kekeh/angular-mydatepicker) - Angular datepicker and date range picker 📅

- [kekeh/mydatepicker](https://github.com/kekeh/mydatepicker) - Angular 2+ date picker

- [kekeh/ngx-mydatepicker](https://github.com/kekeh/ngx-mydatepicker) - Angular 2+ attribute directive datepicker

- [martre3/ngx-dates-picker](https://github.com/martre3/ngx-dates-picker) - Angular 2+ datepicker component with no JQuery dependency.

- [NilavPatel/np-ui-time-picker-package](https://github.com/NilavPatel/np-ui-time-picker-package) - angular 8 custom time picker component

- :coffin: [nkalinov/ng2-datetime](https://github.com/nkalinov/ng2-datetime) - Datetime picker plugins wrapper for Angular2+

- [owsolutions/amazing-time-picker](https://github.com/owsolutions/amazing-time-picker) - Timepicker (Clock Picker) for Angular 2, Angular 4 and Angular 5, Angular 6, Angular 7 - Compatible with Angular Material

- [qqnc/ngx-daterangepicker](https://github.com/qqnc/ngx-daterangepicker) - the date range picker mimic from daterangepicker.js in Angular 2+/6/7 way

- [redplane/ngx-datetime-picker](https://github.com/redplane/ngx-datetime-picker) - Collection of tools which can be used in Angular 4

- [RenovoSolutions/ngx-datetimepicker](https://github.com/RenovoSolutions/ngx-datetimepicker) - An Angular component for a customizable date and time picker

- [RezaT1994/ir-datetimepicker](https://github.com/RezaT1994/ir-datetimepicker) - Angular 6 persian datetime picker

- [yannickebongue/ngx-material-time-select](https://github.com/yannickebongue/ngx-material-time-select) - The time select allows users to enter a time either through text input, or by choosing a time from the select panel

- [vlio20/angular-datepicker](https://github.com/vlio20/angular-datepicker) - Highly configurable date picker built for Angular applications



#### Emoji Picker

- [TypeCtrl/ngx-emoji-mart](https://github.com/TypeCtrl/ngx-emoji-mart) - Customizable Slack-like emoji picker for Angular



#### Phone Number Input Formatter



#### Generator



#### Select



#### Slider



- [Bogdan1975/ng2-slider-component](https://github.com/Bogdan1975/ng2-slider-component) - Angular 2 slider component



#### Drag and Drop



#### Autocomplete



*Autosuggest / autocomplete / typeahead*



#### Type Select



*Let the user select a tag / something while typing*



#### Color Picker



- :warning: [Alberplz/angular2-color-picker](https://github.com/Alberplz/angular2-color-picker) - Angular 2 Color Picker Directive, no dependences required.

- [AndyMeps/ng2-color-picker](https://github.com/AndyMeps/ng2-color-picker) - Simple color picker for Angular 2

- [zefoy/ngx-color-picker](https://github.com/zefoy/ngx-color-picker) - Color picker widget for the Angular (version 2 and newer)



#### Switch



*Switch / on/off toggle / checkbox*



#### Masked Input



#### Rich Text Editing



#### Image Manipulation



*Edit images*



*Display images*



#### Video Manipulation



#### File Upload



#### Context Menu



#### Miscellaneous



#### Wizard



#### CSV



#### Comment System



### Table



*Tables / data grids*



- [ag-grid/ag-grid](https://github.com/ag-grid/ag-grid) - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components

- :arrow_double_down: [akveo/ng2-smart-table](https://github.com/akveo/ng2-smart-table) - Angular Smart Data Table component

- [marinantonio/angular-mat-table-crud](https://github.com/marinantonio/angular-mat-table-crud) - CRUD operations for the Angular Material Table

- :arrow_double_down: [jdjuan/ng-notyf](https://github.com/jdjuan/ng-notyf) - 👻 A dead simple notification library for Angular 👻

- :arrow_double_down: [mariuszfoltak/angular2-datatable](https://github.com/mariuszfoltak/angular2-datatable) - DataTable - Simple table component with sorting and pagination for Angular2

- [ssuperczynski/ngx-easy-table](https://github.com/ssuperczynski/ngx-easy-table) - The Easiest Angular Table. 8.8kb gziped! 60fps! Tree-shakeable. 53 features and growing!

- [swimlane/ngx-datatable](https://github.com/swimlane/ngx-datatable) - ✨ A feature-rich yet lightweight data-table crafted for Angular

- :arrow_double_down: [valor-software/ng2-handsontable](https://github.com/valor-software/ng2-handsontable) - Angular 2 directive for Handsontable

- :arrow_double_down: [valor-software/ng2-table](https://github.com/valor-software/ng2-table) - Simple table extension with sorting, filtering, paging... for Angular2 apps



### Tooltip



*Tooltips / popovers*



- [cloukit/tooltip](https://github.com/cloukit/tooltip) - A simple tooltip component

- [drozhzhin-n-e/ng2-tooltip-directive](https://github.com/drozhzhin-n-e/ng2-tooltip-directive) - The tooltip is a pop-up tip that appears when you hover over an item or click on it.

- [farengeyt451/ngx-tippy-wrapper](https://github.com/farengeyt451/ngx-tippy-wrapper) - Angular 8+ wrapper for Tippy.js

- [gustafguner/angular-tooltip](https://github.com/gustafguner/angular-tooltip) - An easy-to-use Angular (6+) component for displaying tooltips

- [joejordanbrown/popover](https://github.com/joejordanbrown/popover) - Angular CDK Popover, no default style, examples using @angular/material

- :coffin: [pleerock/ngx-tooltip](https://github.com/pleerock/ngx-tooltip) - Simple tooltip control for your angular2 applications using bootstrap3. Does not depend of jquery.

- [MrFrankel/ngx-popper](https://github.com/MrFrankel/ngx-popper) - An angular wrapper for popper.js, great for tooltips and positioning popping elements

- [tamilarasu100/ngx-smart-popper](https://github.com/tamilarasu100/ngx-smart-popper) - ngx-smart-popper

- [vitaliy-bobrov/angular-popper](https://github.com/vitaliy-bobrov/angular-popper) - Popover component for Angular 2+ based on Popper.js library.



### Notification



*Toaster / snackbar — Notify the user with a modeless temporary little popup*



- :arrow_double_down: [akserg/ng2-toasty](https://github.com/akserg/ng2-toasty) - Angular2 Toasty component shows growl-style alerts and messages for your app.

- :arrow_double_down: [alexcastillo/ng2-notifications](https://github.com/alexcastillo/ng2-notifications) - Angular 2 Component for Native Push Notifications [Looking for New Maintainers]

- :arrow_double_down: [artemsky/ng-snotify](https://github.com/artemsky/ng-snotify) - Angular 2+ Notification Center

- [Augustpi/angular2-notifier](https://github.com/Augustpi/angular2-notifier) - Angular notifier

- :arrow_double_down: [cloukit/notification](https://github.com/cloukit/notification) - Show success, error, info and warn notifications on the page

- :arrow_double_down: [cornflourblue/angular-8-alert-notifications](https://github.com/cornflourblue/angular-8-alert-notifications) - Angular 8 - Alert (Toaster) Notifications

- [BenevidesLecontes/ngx-bootstrap-alert-notification](https://github.com/BenevidesLecontes/ngx-bootstrap-alert-notification) - Angular bootstrap alerts as notifications

- [dank/ngx-snackbar](https://github.com/dank/ngx-snackbar) - Snackbar / Toast notifications for Angular

- [dominique-mueller/angular-notifier](https://github.com/dominique-mueller/angular-notifier) - A well designed, fully animated, highly customizable, and easy-to-use notification library for your Angular application. 

- [flauc/angular2-notifications](https://github.com/flauc/angular2-notifications) - A light and easy to use notifications library for Angular.

- [JanMalch/ngx-mat-sw-update](https://github.com/JanMalch/ngx-mat-sw-update) - Angular library to setup a notification for Service Worker updates.

- [LenonLopez/angular-notice](https://github.com/LenonLopez/angular-notice) - Native notifications for your Angular application using the Web Notification API. Works on chrome, firefox, edge, and safari.

- :arrow_double_down: [ngrx/notify](https://github.com/ngrx/notify) - Web Notifications Powered by RxJS for Angular

- :arrow_double_down: [ng-semantic-toast](https://github.com/ojji/ng-semantic-toast) - Angular toast notification module built with Semantic UI.

- [notiflix/Notiflix-Angular](https://github.com/notiflix/Notiflix-Angular) - Notiflix is a JavaScript library for client-side non-blocking notifications, popup boxes, loading indicators, and more to that makes your Angular projects much better.

- [pascaliske/ngx-notifications](https://github.com/pascaliske/ngx-notifications) - Notification module for Angular v6+.

- [scttcper/ngx-toastr](https://github.com/scttcper/ngx-toastr) - 🍞 Angular Toastr

- [Stabzs/Angular2-Toaster](https://github.com/stabzs/Angular2-Toaster) - Angular2-toaster is an asynchronous, non-blocking Angular Toaster Notification library

- :arrow_double_down: [stanvanheumen/ngx-notifications](https://github.com/stanvanheumen/ngx-notifications) - A simple library that allows you to notify your users in your Angular 5+ app.

- :arrow_double_down: [vanthaiunghoa/Angular2-Toaster](https://github.com/vanthaiunghoa/Angular2-Toaster) - Angular2-toaster is an asynchronous, non-blocking Angular Toaster Notification library



### Loader



*Loaders / spinners / progress bars — Let the user know that something is loading*



- :arrow_double_down: [akserg/ng2-slim-loading-bar](https://github.com/akserg/ng2-slim-loading-bar) - Angular 2 component shows slim loading bar at the top of the page.

- [devyumao/angular2-busy](https://github.com/devyumao/angular2-busy) - Show busy/loading indicators on any promise, or on any Observable's subscription.

- [moff/angular2-ladda](https://github.com/moff/angular2-ladda) - Angular 2 Ladda module

- [MurhafSousli/ngx-progressbar](https://github.com/MurhafSousli/ngx-progressbar) - Angular progress bar ☄

- [WoltersKluwerPL/ng-spin-kit](https://github.com/WoltersKluwerPL/ng-spin-kit) - SpinKit (http://tobiasahlin.com/spinkit/) spinners for Angular



### Overlay



*Overlay / modal / alert / dialog / lightbox / popup*



- [biig-io/ngx-smart-modal](https://github.com/biig-io/ngx-smart-modal) - Modal/Dialog component crafted for Angular

- :arrow_double_down: [dougludlow/ng2-bs3-modal](https://github.com/dougludlow/ng2-bs3-modal) - Angular Bootstrap 3 Modal Component

- [mattlewis92/angular-confirmation-popover](https://github.com/mattlewis92/angular-confirmation-popover) - An angular 5.0+ bootstrap confirmation popover

- :arrow_double_down: [shlomiassaf/ngx-modialog](https://github.com/shlomiassaf/ngx-modialog) - Modal / Dialog for Angular



### Parallax



- [ng2-ui/parallax-scroll](https://github.com/ng2-ui/parallax-scroll) - Angular2 parallax background scroll directive



### Icons



- [ant-design/ant-design-icons](https://github.com/ant-design/ant-design-icons) - ⭐ Ant Design SVG Icons

- [czeckd/angular-svg-icon](https://github.com/czeckd/angular-svg-icon) - Angular component for inlining SVGs allowing them to be easily styled with CSS. 

- [FortAwesome/angular-fontawesome](https://github.com/FortAwesome/angular-fontawesome) - Official Angular component for Font Awesome 5



### Menu



- [arkon/ng-sidebar](https://github.com/arkon/ng-sidebar) - Angular sidebar component.

- [isaacplmann/ngx-contextmenu](https://github.com/isaacplmann/ngx-contextmenu) - An Angular component to show a context menu on an arbitrary component

- [MurhafSousli/ngx-gallery](https://github.com/MurhafSousli/ngx-gallery) - Angular Gallery, Carousel and Lightbox



### Minus Plus Input



### Carousel



- [bfwg/ngx-drag-scroll](https://github.com/bfwg/ngx-drag-scroll) - A lightweight responsive Angular carousel library

- [sheikalthaf/ngu-carousel](https://github.com/sheikalthaf/ngu-carousel) - Angular Universal carousel

- [zefoy/ngx-swiper-wrapper](https://github.com/zefoy/ngx-swiper-wrapper) - Angular wrapper library for Swiper



### Charts



- [carbon-design-system/carbon-charts](https://github.com/carbon-design-system/carbon-charts) - 📊 📈 Robust dataviz framework implemented using D3 & typescript

- [gevgeny/angular2-highcharts](https://github.com/gevgeny/angular2-highcharts) - 📊 📈 Highcharts for your Angular project

- [swimlane/ngx-charts](https://github.com/swimlane/ngx-charts) - 📊 Declarative Charting Framework for Angular



### Time



*Display time / date / age*



- [AndrewPoyntz/time-ago-pipe](https://github.com/AndrewPoyntz/time-ago-pipe) - An Angular pipe for converting a date string into a time ago

- [ihym/ngx-timeago](https://github.com/ihym/ngx-timeago) - ⏰ Live updating timestamps in Angular 6+



### Map



- [ng2-ui/map](https://github.com/ng2-ui/map) - Angular Google Maps Directives

- [SebastianM/angular-google-maps](https://github.com/SebastianM/angular-google-maps) - Angular 2+ Google Maps Components



### Audio / Video



- [orizens/ngx-youtube-player](https://github.com/orizens/ngx-youtube-player) - (ngx) A youtube component wrapped with Angular (typescript)



### Infinite Scroll



- [ashwin-sureshkumar/angular-infinite-scroller](https://github.com/ashwin-sureshkumar/angular-infinite-scroller) 

- [orizens/ngx-infinite-scroll](https://github.com/orizens/ngx-infinite-scroll) - Infinite Scroll Directive for Angular



### Pull-to-refresh



### Markdown



- [dimpu/ngx-md](https://github.com/dimpu/ngx-md) - Angular(ngx) directive for parsing markdown content in your web application.

- [jfcere/ngx-markdown](https://github.com/jfcere/ngx-markdown) - Angular markdown component/directive/pipe/service to parse static, dynamic or remote content to html with syntax highlight 

- [yisraelx/ngx-showdown](https://github.com/yisraelx/ngx-showdown) - Angular (>=2) integration for Showdown



### PDF



- [VadimDez/ng2-pdf-viewer](https://github.com/VadimDez/ng2-pdf-viewer) - 📄 PDF Viewer Component for Angular 5+



### Tree

- [500tech/angular-tree-component](https://github.com/500tech/angular-tree-component) - A simple yet powerful tree component for Angular (>=2) 

- [valor-software/ng2-tree](https://github.com/valor-software/ng2-tree) - Angular tree component



### Social Sharing



- [MurhafSousli/ngx-sharebuttons](https://github.com/MurhafSousli/ngx-sharebuttons) - Angular Share Buttons ☂



### QR Code



- [armanfatahi/ngx-qr](https://github.com/armanfatahi/ngx-qr) - Angular 8 qr scanner

- [Cordobo/angularx-qrcode](https://github.com/Cordobo/angularx-qrcode) - Angular4/5/6/7/8/9 QRCode generator Component library for QR Codes (Quick Response) with AOT support based on qrcodejs

- [werthdavid/ngx-kjua](https://github.com/werthdavid/ngx-kjua) - Angular QR-Code generator component using kjua.

- [zxing-js/ngx-scanner](https://github.com/zxing-js/ngx-scanner) - Angular (2+) QR code, Barcode, DataMatrix, scanner component using ZXing. 



### Search



### Tabs



### Canvas



### Link Preview



- [angular-material-extensions/link-preview](https://github.com/angular-material-extensions/link-preview) - Angular open source UI library to preview web links

- [btxtiger/ngx-link-preview](https://github.com/btxtiger/ngx-link-preview) - The Open Graph link preview component for Angular



### Tour



### Miscellaneous

- [angulartics/angulartics2](https://github.com/angulartics/angulartics2) - Vendor-agnostic analytics for Angular2 applications.

- [FrancescoBorzi/ngx-duration-picker](https://github.com/FrancescoBorzi/ngx-duration-picker) - Angular component for ISO_8601 durations

- [NiyazNz/ng-favicon](https://github.com/NiyazNz/ng-favicon) - A simple angular service to change favicon or display unread messages and notifications on top of favicon



## UI Layout



*Layout for the overall / main view*



## Frameworks



### Responsive



*Set of components + responsive layout system*



### Mobile



*UI frameworks for mobile*



*Set of components for mobile*



### Component Collections



*Set of components without layout system*



### Admin Template



*Set of admin template*



- [akveo/ngx-admin](https://github.com/akveo/ngx-admin) - Customizable admin dashboard template based on Angular 8+



### Server-side rendering



### Static website generator



### Other



## UI Utilities



## Services



- [brtnshrdr/angular2-hotkeys](https://github.com/brtnshrdr/angular2-hotkeys) - Keyboard shortcuts for Angular 2 apps