├── .github └── pull_request_template.md ├── angular-logo.svg ├── contributing.md ├── license.md └── readme.md /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | ../contributing.md -------------------------------------------------------------------------------- /angular-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 10 | 11 | 12 | 13 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /contributing.md: -------------------------------------------------------------------------------- 1 | * Don't create a pull request to add a library, instead use [devarchy.com/angular](https://devarchy.com/angular). 2 | * Only create a pull request to change the categorization. 3 | * Open an issue if you are not sure how to change the categorization to fit a library you want to add. 4 | -------------------------------------------------------------------------------- /license.md: -------------------------------------------------------------------------------- 1 | CC0 1.0 Universal 2 | 3 | Statement of Purpose 4 | 5 | The laws of most jurisdictions throughout the world automatically confer 6 | exclusive Copyright and Related Rights (defined below) upon the creator and 7 | subsequent owner(s) (each and all, an "owner") of an original work of 8 | authorship and/or a database (each, a "Work"). 9 | 10 | Certain owners wish to permanently relinquish those rights to a Work for the 11 | purpose of contributing to a commons of creative, cultural and scientific 12 | works ("Commons") that the public can reliably and without fear of later 13 | claims of infringement build upon, modify, incorporate in other works, reuse 14 | and redistribute as freely as possible in any form whatsoever and for any 15 | purposes, including without limitation commercial purposes. These owners may 16 | contribute to the Commons to promote the ideal of a free culture and the 17 | further production of creative, cultural and scientific works, or to gain 18 | reputation or greater distribution for their Work in part through the use and 19 | efforts of others. 20 | 21 | For these and/or other purposes and motivations, and without any expectation 22 | of additional consideration or compensation, the person associating CC0 with a 23 | Work (the "Affirmer"), to the extent that he or she is an owner of Copyright 24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work 25 | and publicly distribute the Work under its terms, with knowledge of his or her 26 | Copyright and Related Rights in the Work and the meaning and intended legal 27 | effect of CC0 on those rights. 28 | 29 | 1. Copyright and Related Rights. A Work made available under CC0 may be 30 | protected by copyright and related or neighboring rights ("Copyright and 31 | Related Rights"). Copyright and Related Rights include, but are not limited 32 | to, the following: 33 | 34 | i. the right to reproduce, adapt, distribute, perform, display, communicate, 35 | and translate a Work; 36 | 37 | ii. moral rights retained by the original author(s) and/or performer(s); 38 | 39 | iii. publicity and privacy rights pertaining to a person's image or likeness 40 | depicted in a Work; 41 | 42 | iv. rights protecting against unfair competition in regards to a Work, 43 | subject to the limitations in paragraph 4(a), below; 44 | 45 | v. rights protecting the extraction, dissemination, use and reuse of data in 46 | a Work; 47 | 48 | vi. database rights (such as those arising under Directive 96/9/EC of the 49 | European Parliament and of the Council of 11 March 1996 on the legal 50 | protection of databases, and under any national implementation thereof, 51 | including any amended or successor version of such directive); and 52 | 53 | vii. other similar, equivalent or corresponding rights throughout the world 54 | based on applicable law or treaty, and any national implementations thereof. 55 | 56 | 2. Waiver. To the greatest extent permitted by, but not in contravention of, 57 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and 58 | unconditionally waives, abandons, and surrenders all of Affirmer's Copyright 59 | and Related Rights and associated claims and causes of action, whether now 60 | known or unknown (including existing as well as future claims and causes of 61 | action), in the Work (i) in all territories worldwide, (ii) for the maximum 62 | duration provided by applicable law or treaty (including future time 63 | extensions), (iii) in any current or future medium and for any number of 64 | copies, and (iv) for any purpose whatsoever, including without limitation 65 | commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes 66 | the Waiver for the benefit of each member of the public at large and to the 67 | detriment of Affirmer's heirs and successors, fully intending that such Waiver 68 | shall not be subject to revocation, rescission, cancellation, termination, or 69 | any other legal or equitable action to disrupt the quiet enjoyment of the Work 70 | by the public as contemplated by Affirmer's express Statement of Purpose. 71 | 72 | 3. Public License Fallback. Should any part of the Waiver for any reason be 73 | judged legally invalid or ineffective under applicable law, then the Waiver 74 | shall be preserved to the maximum extent permitted taking into account 75 | Affirmer's express Statement of Purpose. In addition, to the extent the Waiver 76 | is so judged Affirmer hereby grants to each affected person a royalty-free, 77 | non transferable, non sublicensable, non exclusive, irrevocable and 78 | unconditional license to exercise Affirmer's Copyright and Related Rights in 79 | the Work (i) in all territories worldwide, (ii) for the maximum duration 80 | provided by applicable law or treaty (including future time extensions), (iii) 81 | in any current or future medium and for any number of copies, and (iv) for any 82 | purpose whatsoever, including without limitation commercial, advertising or 83 | promotional purposes (the "License"). The License shall be deemed effective as 84 | of the date CC0 was applied by Affirmer to the Work. Should any part of the 85 | License for any reason be judged legally invalid or ineffective under 86 | applicable law, such partial invalidity or ineffectiveness shall not 87 | invalidate the remainder of the License, and in such case Affirmer hereby 88 | affirms that he or she will not (i) exercise any of his or her remaining 89 | Copyright and Related Rights in the Work or (ii) assert any associated claims 90 | and causes of action with respect to the Work, in either case contrary to 91 | Affirmer's express Statement of Purpose. 92 | 93 | 4. Limitations and Disclaimers. 94 | 95 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 96 | surrendered, licensed or otherwise affected by this document. 97 | 98 | b. Affirmer offers the Work as-is and makes no representations or warranties 99 | of any kind concerning the Work, express, implied, statutory or otherwise, 100 | including without limitation warranties of title, merchantability, fitness 101 | for a particular purpose, non infringement, or the absence of latent or 102 | other defects, accuracy, or the present or absence of errors, whether or not 103 | discoverable, all to the greatest extent permissible under applicable law. 104 | 105 | c. Affirmer disclaims responsibility for clearing rights of other persons 106 | that may apply to the Work or any use thereof, including without limitation 107 | any person's Copyright and Related Rights in the Work. Further, Affirmer 108 | disclaims responsibility for obtaining any necessary consents, permissions 109 | or other rights required for any use of the Work. 110 | 111 | d. Affirmer understands and acknowledges that Creative Commons is not a 112 | party to this document and has no duty or obligation with respect to this 113 | CC0 or use of the Work. 114 | 115 | For more information, please see 116 | 117 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | [](https://github.com/brillout/awesome-angular-components) 2 | 3 | # Angular 2+ Components & Libraries 4 | 5 | - Official website: [`devarchy.com/angular`](https://devarchy.com/angular) 6 | - Use devarchy to add a library to the catalog 7 | 8 |
9 | 10 | #### Contents 11 | - [UI Components](#ui-components) 12 | - [Overlay](#overlay) 13 | - [Notification](#notification) 14 | - [Popover](#popover) 15 | - [Table](#table) 16 | - [Tree](#tree) 17 | - [Loading / Progress Indicators](#loading--progress-indicators) 18 | - [Menu](#menu) 19 | - [Charts](#charts) 20 | - [Map](#map) 21 | - [List Virtualization](#list-virtualization) 22 | - [Infinite Scroll](#infinite-scroll) 23 | - [Parallax](#parallax) 24 | - [Scrollbar](#scrollbar) 25 | - [Carousel](#carousel) 26 | - [Sticky](#sticky) 27 | - [Context Menu](#context-menu) 28 | - [Time](#time) 29 | - [Audio / Video](#audio--video) 30 | - [SVG](#svg) 31 | - [Social Sharing](#social-sharing) 32 | - [PDF](#pdf) 33 | - [Miscellaneous](#miscellaneous) 34 | - [Form](#form) 35 | - [Date Picker](#date-picker) 36 | - [Color Picker](#color-picker) 37 | - [Slider](#slider) 38 | - [Select](#select) 39 | - [Autocomplete](#autocomplete) 40 | - [Type Select](#type-select) 41 | - [Drag and Drop](#drag-and-drop) 42 | - [Sortable List](#sortable-list) 43 | - [Masked Input](#masked-input) 44 | - [Rich Text Editor](#rich-text-editor) 45 | - [File Upload](#file-upload) 46 | - [Autosize Input / Textarea](#autosize-input--textarea) 47 | - [Calendar](#calendar) 48 | - [Image Editing](#image-editing) 49 | - [UI Layout](#ui-layout) 50 | - [Responsive](#responsive) 51 | - [UI Frameworks](#ui-frameworks) 52 | - [Responsive](#responsive-1) 53 | - [Component Collections](#component-collections) 54 | - [Mobile](#mobile) 55 | - [Admin Panel](#admin-panel) 56 | - [Isomorphic Apps](#isomorphic-apps) 57 | - [Code Structure](#code-structure) 58 | - [Data Management](#data-management) 59 | - [Communication with Server](#communication-with-server) 60 | - [Code Style](#code-style) 61 | - [Utilities](#utilities) 62 | - [Pipes](#pipes) 63 | - [Form](#form-1) 64 | - [Animations](#animations) 65 | - [API](#api) 66 | - [Authentication](#authentication) 67 | - [Event Handling](#event-handling) 68 | - [Scroll](#scroll) 69 | - [Responsive Design](#responsive-design) 70 | - [Persistence](#persistence) 71 | - [Cookie](#cookie) 72 | - [Routing](#routing) 73 | - [Pagination](#pagination) 74 | - [Validation](#validation) 75 | - [i18n](#i18n) 76 | - [Logging](#logging) 77 | - [Asset management](#asset-management) 78 | - [Meta Tags](#meta-tags) 79 | - [Clipboard](#clipboard) 80 | - [Angular 1 -> Angular 2 Migration](#angular-1---angular-2-migration) 81 | - [Documentation](#documentation) 82 | - [Product Tour](#product-tour) 83 | - [Performance](#performance) 84 | - [Lazy Load](#lazy-load) 85 | - [Integrations](#integrations) 86 | - [Dev Tools](#dev-tools) 87 | - [Starter Kit](#starter-kit) 88 | 89 | 90 |
91 |
92 |
93 |
94 | 95 | # UI Components 96 | 97 | ###### Overlay 98 | 99 | *Overlay / modal / alert / dialog / lightbox / popup* 100 | 101 | - [angular2-modal](https://github.com/shlomiassaf/angular2-modal) - Angular2 Modal / Dialog window. 102 | - [ng2-bs3-modal](https://github.com/dougludlow/ng2-bs3-modal) - Angular2 Bootstrap3 Modal Component. 103 | 104 | ###### Notification 105 | 106 | *Toaster / snackbar — Notify the user with a modeless temporary little popup* 107 | 108 | - [angular2-toaster](https://github.com/stabzs/Angular2-Toaster) - Angular2-toaster is an asynchronous, non-blocking Angular2 Toaster Notification library. 109 | - [ng2-toasty](https://github.com/akserg/ng2-toasty) - Angular2 Toasty component shows growl-style alerts and messages for your app. 110 | - [ng2-notifications](https://github.com/alexcastillo/ng2-notifications) - Angular 2 Component for Native Push Notifications. 111 | - [ngx-toastr](https://github.com/scttcper/ngx-toastr) - Angular 2 toastr. 112 | - [@ngrx/notify](https://github.com/ngrx/notify) - Web Notifications Powered by RxJS for Angular. 113 | - [angular2-notifications](https://github.com/flauc/angular2-notifications) - A light and easy to use notifications library for Angular 2. It features both regular page notifications (toasts) and push notifications. 114 | - [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 2+ application. 115 | - [ng2-toastr](https://github.com/PointInside/ng2-toastr) - Bootstrap style toast for modern angular (v2.0.0 and above). 116 | 117 | ###### Popover 118 | 119 | *Show a little dialog next to an element* 120 | 121 | - [angular-confirmation-popover](https://github.com/mattlewis92/angular-confirmation-popover) - Displays a bootstrap confirmation popover (with no jQuery or bootstrap JS!). 122 | 123 | ###### Table 124 | 125 | *Table / Data Grid — Display (large) datasets* 126 | 127 | - [@swimlane/ngx-datatable](https://github.com/swimlane/ngx-datatable) - A feature-rich yet lightweight data-table crafted for Angular2 and beyond. 128 | - [ng2-table](https://github.com/valor-software/ng2-table) - Simple table extension with sorting, filtering, paging... for Angular2 apps. 129 | - [angular2-datatable](https://github.com/mariuszfoltak/angular2-datatable) - DataTable - Simple table component with sorting and pagination for Angular2. 130 | - [ng2-easy-table](https://github.com/ssuperczynski/ng2-easy-table) - The easiest Angular2 table. 131 | - [ng2-handsontable](https://github.com/valor-software/ng2-handsontable) - Angular 2 directive for Handsontable. 132 | - [ag-grid-angular](https://github.com/ceolter/ag-grid-angular) - Ag-Grid Angular 2 Component. 133 | - [ng2-smart-table](https://github.com/akveo/ng2-smart-table) - Angular 2 Smart Data Table component. 134 | 135 | ###### Tree 136 | 137 | *Visualize data as a tree* 138 | 139 | - [angular2-tree-component](https://github.com/500tech/angular2-tree-component) - A simple yet powerful tree component for Angular2. 140 | - [ng2-tree](https://github.com/valor-software/ng2-tree) - Angular2 component for visualizing data that can be naturally represented as a tree. 141 | 142 | ###### Loading / Progress Indicators 143 | 144 | *Let the user know that something is being loaded* 145 | 146 | - [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. 147 | - [angular2-busy](https://github.com/devyumao/angular2-busy) - Show busy/loading indicators on any promise, or on any Observable's subscription. 148 | - [angular2-ladda](https://github.com/moff/angular2-ladda) - Angular 2 Ladda module. 149 | - [ng-spin-kit](https://github.com/WoltersKluwerPL/ng-spin-kit) - SpinKit ( spinners for Angular 2+. 150 | - [ngx-progressbar](https://github.com/MurhafSousli/ngx-progressbar) - Angular progress bar. 151 | 152 | ###### Menu 153 | 154 | *Menu / sidebar* 155 | 156 | - [ng-sidebar](https://github.com/arkon/ng-sidebar) - Angular 2+ sidebar component. 157 | 158 | ###### Charts 159 | 160 | - [ng2-charts](https://github.com/valor-software/ng2-charts) - Beautiful charts for Angular2 based on Chart.js. 161 | - [ngx-charts](https://github.com/swimlane/ngx-charts) - Declarative Charting Framework for Angular2 and beyond. 162 | - [angular2-highcharts](https://github.com/gevgeny/angular2-highcharts) - Highcharts for your Angular2 project. 163 | - [ng2-nvd3](https://github.com/krispo/ng2-nvd3) - Angular2 component for nvd3. 164 | 165 | ###### Map 166 | 167 | - [angular2-google-maps](https://github.com/SebastianM/angular2-google-maps) - Angular 2+ Google Maps Components. 168 | - [ng2-map](https://github.com/ng2-ui/ng2-map) - Angular2 Google Maps Directives. 169 | - [angular2-esri4-components](https://github.com/kgs916/angular2-esri4-components) - A set of Angular 2 components to work with ArcGIS API for JavaScript v4.1. 170 | 171 | ###### List Virtualization 172 | 173 | - [od-virtualscroll](https://github.com/dinony/od-virtualscroll) - Observable-based virtual scroll implementation in Angular 174 | 175 | ###### Infinite Scroll 176 | 177 | - [ngx-infinite-scroll](https://github.com/orizens/ngx-infinite-scroll) - Infinite Scroll Directive for angular 2. 178 | 179 | ###### Parallax 180 | 181 | *Parallax effect while scrolling* 182 | 183 | - [ng2-parallax-scroll](https://github.com/ng2-ui/ng2-parallax-scroll) - Angular2 parallax background scroll directive. 184 | 185 | ###### Scrollbar 186 | 187 | *Replace the browser scrollbar with a custom one* 188 | 189 | - [angular2-perfect-scrollbar](https://github.com/zefoy/ngx-perfect-scrollbar) - Angular 2 wrapper library for perfect scrollbar. 190 | 191 | ###### Carousel 192 | 193 | *Carousel / touch slider / swiper* 194 | 195 | - [angular2-swiper-wrapper](https://github.com/zefoy/ngx-swiper-wrapper) - Angular 2 wrapper library for swiper. 196 | 197 | ###### Sticky 198 | 199 | *Implementations similar to `position: sticky`* 200 | 201 | - [@ngui/sticky](https://github.com/ng2-ui/sticky) - Angular2 "position: sticky" implementation as a directive. 202 | 203 | ###### Context Menu 204 | 205 | - [angular2-contextmenu](https://github.com/isaacplmann/angular2-contextmenu) - A context menu built with Angular 2 inspired by ui.bootstrap.contextMenu. 206 | 207 | ###### Time 208 | 209 | *Display time / date / age* 210 | 211 | - [angular2-moment](https://github.com/urish/angular2-moment) - Moment.js pipes for Angular2. 212 | 213 | ###### Audio / Video 214 | 215 | - [videogular2](https://github.com/videogular/videogular2) - The HTML5 video player for Angular 2. 216 | 217 | ###### SVG 218 | 219 | - [ng-inline-svg](https://github.com/arkon/ng-inline-svg) - Angular 2+ directive for inserting an SVG file inline within an element. 220 | 221 | ###### Social Sharing 222 | 223 | - [ng2-sharebuttons](https://github.com/MurhafSousli/ng2-sharebuttons) - Share buttons for angular. 224 | 225 | ###### PDF 226 | 227 | - [ng2-pdf-viewer](https://github.com/VadimDez/ng2-pdf-viewer) - PDF Viewer Component for Angular 2. 228 | 229 | ###### Miscellaneous 230 | 231 | - [ng2-inline-editor](https://github.com/caballerog/ng2-inline-editor) - Native UI Inline-editor Angular2 component. 232 | - [ng2-markdown-to-html](https://github.com/jfcere/ng2-markdown-to-html) - Angular 2 markdown component/directive to parse static or remote content to html. 233 | - [ngx-no-animation-for-dinosaur](https://github.com/maxisam/ngx-no-animation-for-dinosaur) - Simple solution for disabling animation for certain old browser 234 | 235 | 236 | 237 | 238 | 239 | ### Form 240 | 241 | *Let the user create & edit data* 242 | 243 | ###### Date Picker 244 | 245 | *Time Picker / Datetime Picker* 246 | 247 | - [ng2-datepicker](https://github.com/jkuri/ng2-datepicker) - Angular2 Datepicker Component. 248 | - [mydatepicker](https://github.com/kekeh/mydatepicker) - Angular2 date picker. 249 | - [ng2-datetime](https://github.com/nkalinov/ng2-datetime) - Datetime picker plugins wrapper for Angular2. 250 | - [ng2-date-picker](https://github.com/vlio20/ng2-date-picker) - Highly configurable date picker built for Angular 2 applications. 251 | - [angular2-material-datepicker](https://github.com/koleary94/Angular-2-Datepicker) - A minimalist datepicker inspired by Google's material design. 252 | 253 | ###### Color Picker 254 | 255 | - [ngx-color-picker](https://github.com/zefoy/ngx-color-picker) - Color picker widget for Angular 2+. 256 | - [angular2-color-picker](https://github.com/Alberplz/angular2-color-picker) - Angular 2 Color Picker Directive, no dependences required. 257 | - [ng2-color-picker](https://github.com/AndyMeps/ng2-color-picker) - Simple color picker for Angular 2. 258 | 259 | ###### Slider 260 | 261 | *Let the user choose a value from a given range* 262 | 263 | - [ng2-slider-component](https://github.com/Bogdan1975/ng2-slider-component) - Angular 2 slider component. 264 | 265 | ###### Select 266 | 267 | *Let the user choose from a list of options* 268 | 269 | - [ng2-select](https://github.com/valor-software/ng2-select) - Angular2 based replacement for select boxes. 270 | - [angular2-select](https://github.com/basvandenberg/angular2-select) - A native angular 2 select component (based on select2). 271 | 272 | ###### Autocomplete 273 | 274 | *Autosuggest / autocomplete / typeahead* 275 | 276 | - [ng2-completer](https://github.com/oferh/ng2-completer) - Angular 2 autocomplete component. 277 | - [ng2-auto-complete](https://github.com/ng2-ui/ng2-auto-complete) - Angular2 Auto Complete. 278 | 279 | ###### Type Select 280 | 281 | *Let the user select a tag / something while typing* 282 | 283 | - [ng2-tag-input](https://github.com/Gbuomprisco/ng2-tag-input) - Tag Input for Angular. 284 | 285 | ###### Drag and Drop 286 | 287 | - [ng2-dragula](https://github.com/valor-software/ng2-dragula) - Simple drag and drop with dragula. 288 | - [ng2-dnd](https://github.com/akserg/ng2-dnd) - Angular 2 Drag-and-Drop without dependencies. 289 | - [ng-drag-drop](https://github.com/ObaidUrRehman/ng-drag-drop) - Angular 4 Drag & Drop based on HTML5 with no external dependencies. 290 | 291 | ###### Sortable List 292 | 293 | *Let the user define an order on a list* 294 | 295 | - [angular-sortablejs](https://github.com/SortableJS/angular-sortablejs) - A Angular 2+ binding to SortableJS. 296 | 297 | ###### Masked Input 298 | 299 | - [angular2-text-mask](https://github.com/text-mask/text-mask) - Input mask for React, Angular, Ember, Vue, & plain JavaScript. 300 | - [soft-angular-mask](https://github.com/renatosistemasvc/soft-angular-mask) - Directive to masquerade input in angular 2/4 (money and number). 301 | 302 | ###### Rich Text Editor 303 | 304 | - [ng2-ckeditor-codemirror](https://github.com/chymz/ng2-ckeditor) - Angular2 CKEditor component. 305 | - [angular2-voog-wysihtml](https://github.com/zefoy/ngx-voog-wysihtml) - Voog wysihtml wrapper for Angular 2. 306 | - [angular2-froala-wysiwyg](https://github.com/froala/angular2-froala-wysiwyg) - AngularJS2 bindings for Froala WYSIWYG HTML Rich Text Editor. 307 | 308 | ###### File Upload 309 | 310 | - [ng2-file-upload](https://github.com/valor-software/ng2-file-upload) - Easy to use Angular2 components for files upload. 311 | - [ngx-uploader](https://github.com/jkuri/ngx-uploader) - Angular File Uploader. 312 | - [angular2-dropzone-wrapper](https://github.com/zefoy/ngx-dropzone-wrapper) - Angular 2 wrapper library for dropzone. 313 | 314 | ###### Autosize Input / Textarea 315 | 316 | - [angular2-autosize](https://github.com/stevepapa/angular2-autosize) - Angular2-autosize is an Angular2 directive that automatically adjusts textarea height to fit content. 317 | 318 | ###### Calendar 319 | 320 | *Show & edit events in a calendar view* 321 | 322 | - [angular2-calendar](https://github.com/mattlewis92/angular2-calendar) - A flexible calendar component for angular 2.0+ that can display events on a month, week or day view. 323 | - [angular2-fullcalendar](https://github.com/nekken/ng2-fullcalendar) - An Angular 2 component for fullcalendar. 324 | 325 | ###### Image Editing 326 | 327 | *Image manipulation* 328 | 329 | - [ng2-img-cropper](https://github.com/cstefanache/angular2-img-cropper) - Angular 2 Image Cropper. 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | # UI Layout 339 | 340 | *Layout the overall / main view* 341 | 342 | - [angular2-grid](https://github.com/BTMorton/angular2-grid) - A grid-based drag/drop/resize directive plugin for Angular 2. 343 | - [ng2-fullpage](https://github.com/meiblorn/ng2-fullpage) - Angular 2 fullpage scrolling. 344 | - [angular-split](https://github.com/bertrandg/angular-split) - Angular (2+) UI library to split views. 345 | - [ngresizable](https://github.com/mgechev/ngresizable) - Simple, tree-shakable, AoT, Universal and Web Worker friendly resizable component for Angular 346 | 347 | ###### Responsive 348 | 349 | - [@angular/flex-layout](https://github.com/angular/flex-layout) 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | # UI Frameworks 358 | 359 | 360 | ### Responsive 361 | 362 | *Set of components + responsive layout system* 363 | 364 | - [ng2-bootstrap](https://github.com/valor-software/ng2-bootstrap) - Native Angular directives for Bootstrap. 365 | - [@ng-bootstrap/ng-bootstrap](https://github.com/ng-bootstrap/ng-bootstrap) - Angular powered Bootstrap. 366 | - [ng-semantic](https://github.com/vladotesanovic/ngSemantic) - Angular 2 building blocks based on Semantic UI. 367 | - [angular2-materialize](https://github.com/InfomediaLtd/angular2-materialize) - Angular 2 support for Materialize CSS framework. 368 | - [ng2-semantic-ui](https://github.com/edcarroll/ng2-semantic-ui) - Semantic UI Angular 2 Integrations -- no JQuery required --. 369 | - [clarity-angular](https://github.com/vmware/clarity) - Clarity Design System: UX guidelines, HTML/CSS framework, and Angular 2 components working together to craft exceptional experiences. 370 | - [@covalent/core](https://github.com/teradata/covalent) - Teradata UI Platform built on Angular-Material 2.0. 371 | 372 | ### Component Collections 373 | 374 | *Set of components without layout system* 375 | 376 | - [@angular/material](https://github.com/angular/material2) - Official Material Design components for Angular. 377 | - [primeng](https://github.com/primefaces/primeng) - UI Components for Angular 2. 378 | - [ng-lightning](https://github.com/ng-lightning/ng-lightning) - Native Angular 2 components & directives for Lightning Design System. 379 | - [angular2-mdl](https://github.com/mseemann/angular2-mdl) - Angular 2 components, directives and styles based on material design lite. 380 | - [fuel-ui](https://github.com/FuelInteractive/fuel-ui) - UI Components for use with Angular2 and Bootstrap4. 381 | - [igniteui-angular2](https://github.com/IgniteUI/igniteui-angular2) - Ignite UI directives for Angular 2. 382 | - [md2](https://github.com/Promact/md2) - Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Collapse, Colorpicker, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Tabs, Tags(Chips), Toast and Tooltip. 383 | - [igniteui-js-blocks](https://github.com/IgniteUI/igniteui-js-blocks) - Mobile-first Angular native components. 384 | - [devextreme-angular](https://github.com/DevExpress/devextreme-angular) - Angular 2 UI and visualization components based on DevExtreme widgets. 385 | - [ng-zorro-antd](https://github.com/NG-ZORRO/ng-zorro-antd) - An enterprise-class UI components based on Ant Design and Angular. 386 | 387 | ### Mobile 388 | 389 | - [ionic2](https://github.com/driftyco/ionic) - Build amazing native and progressive web apps with Angular and open web technologies. One app running on everything. 390 | - [angular2-onsenui](https://github.com/onsenui/onsenui) - Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js. 391 | 392 | ### Admin panel 393 | 394 | *Admin panels / dashboard* 395 | 396 | - [ngx-admin](https://github.com/akveo/ngx-admin) - Admin template based on Nebular framework (Angular 4+, Bootstrap 4+). 397 | 398 | 399 | # Isomorphic Apps 400 | *Server-side rendering* 401 | 402 | - [angular-ssr](https://github.com/clbond/angular-ssr) - Angular 4+ server-side rendering solution 403 | - [@ng-seed/universal](https://github.com/ng-seed/universal) - Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Material Design & Flexbox, Webpack, dev/prod modes, DLLs, AoT compilation, HMR, SCSS compilation, lazy loading, @ngrx/store, config, cache, i18n, SEO, angulartics2 and TSLint/codelyzer. 404 | 405 | 406 | 407 | # Code Structure 408 | 409 | *Improve overall design of the source code* 410 | 411 | ### Data Management 412 | 413 | *Data flow / data store / data flow* 414 | 415 | - [@angular-redux/store](https://github.com/angular-redux/store) - Angular 2 bindings for Redux. 416 | - [@ngrx/store](https://github.com/ngrx/store) - RxJS powered state management for Angular applications, inspired by Redux. 417 | - [mobx-angular](https://github.com/mobxjs/mobx-angular) - MobX connector to Angular 2. 418 | - [@ngx-config/core](https://github.com/fulls1z3/ngx-config) - Configuration utility for Angular. 419 | 420 | ### Communication with Server 421 | 422 | - [apollo-angular](https://github.com/apollographql/apollo-angular) - Angular integration for the Apollo Client. 423 | 424 | 425 | 426 | 427 | 428 | # Code Style 429 | 430 | *Improve readability of the source code* 431 | 432 | - [codelyzer](https://github.com/mgechev/codelyzer) - Linting for Angular projects. 433 | - [babel-plugin-angular2-annotations](https://github.com/shuhei/babel-plugin-angular2-annotations) - A babel transformer plugin for Angular 2 annotations. 434 | - [redux-decorators](https://github.com/KarlPurk/redux-decorators) - A ridiculously good syntax for working with Redux using decorators in ES7 / TypeScript. Currently limited to Angular 2 but could potentially be used elsewhere. 435 | - [angular-tslint-rules](https://github.com/ng-seed/angular-tslint-rules) - Shared TSLint & codelyzer rules to enforce a consistent code style for Angular development. 436 | 437 | 438 | 439 | 440 | # Utilities 441 | 442 | ###### Pipes 443 | 444 | - [angular-pipes](https://github.com/fknop/angular-pipes) - Useful pipes for Angular. 445 | - [ngx-pipes](https://github.com/danrevah/ngx-pipes) - Useful pipes for Angular 2 and beyond with no external dependencies. 446 | - [ng-pipes](https://github.com/a8m/ng-pipes) - Bunch of useful pipes for Angular2 (with no external dependencies!). 447 | - [angular2-linky](https://github.com/dzonatan/angular2-linky) - Linky pipe for angular2. 448 | 449 | ###### Form 450 | 451 | *Utilities to help create HTML forms* 452 | 453 | - [angular2-schema-form](https://github.com/makinacorpus/angular2-schema-form) - Angular2 Schema Form (DISCLAIMER: it is not related to angular-schema-form). 454 | - [ng-formly](https://github.com/formly-js/ng-formly) - JavaScript powered FORMS for ANGULAR 2.x and above. 455 | - [@ultimate/ngxerrors](https://github.com/UltimateAngular/ngxerrors) - A declarative validation module for reactive forms. 456 | 457 | ###### Animations 458 | 459 | - [ng-animate](https://github.com/jiayihu/ng-animate) - 🌙 A collection of cool, reusable and flexible animations for Angular 4.2+ 460 | 461 | ###### API 462 | 463 | *Utilities to consume APIs* 464 | 465 | - [angular2-rest](https://github.com/Paldom/angular2-rest) - Angular2 HTTP client to consume RESTful services. Built with TypeScript. 466 | - [ng2-resource-rest](https://github.com/troyanskiy/ng2-resource-rest) - Resource (REST) Client for Angular 2. 467 | - [angular2-jsonapi](https://github.com/ghidoz/angular2-jsonapi) - A lightweight Angular 2 adapter for JSON API. 468 | - [ng2-rest-api](https://github.com/zaqqaz/ng2-rest-api) - Rest API provider for angular 2. 469 | - [ngx-restangular](https://github.com/2muchcoffeecom/ngx-restangular) - Restangular for Angular 2+ and higher versions. 470 | 471 | ###### Authentication 472 | 473 | - [ng2-ui-auth](https://github.com/ronzeidman/ng2-ui-auth) - An angular2 repository for authentication based on angular1's satellizer. 474 | - [angular2-token](https://github.com/neroniaky/angular2-token) - Token based authentication service for Angular2 (ng2) with multi-user support. Works best with the devise token auth gem for Rails. 475 | - [angular-oauth2-oidc](https://github.com/manfredsteyer/angular-oauth2-oidc) - Support for OAuth 2 and OpenId Connect (OIDC) in Angular. 476 | - [angular-oauth2](https://github.com/oauthjs/angular-oauth2) - AngularJS OAuth2. 477 | - [@ngx-auth/core](https://github.com/fulls1z3/ngx-auth) - Authentication utility for Angular. 478 | 479 | ###### Event Handling 480 | 481 | - [ng-click-outside](https://github.com/arkon/ng-click-outside) - Angular 2+ directive for handling click events outside of an element. 482 | 483 | ###### Scroll 484 | 485 | - [ng2-page-scroll](https://github.com/Nolanus/ng2-page-scroll) - Animated scrolling functionality written in pure angular2. 486 | - [@ngui/scrollable](https://github.com/ng2-ui/scrollable) - Angular2 Automatic Scroll Detection With Animation. 487 | - [ng2-scrollspy](https://github.com/JonnyBGod/ng2-scrollspy) - Angular2 ScrollSpy Service. 488 | 489 | ###### Responsive Design 490 | 491 | - [ng2-responsive](https://github.com/ManuCutillas/ng2-responsive) - Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 2. 492 | 493 | ###### Persistence 494 | 495 | - [angular2-localstorage](https://github.com/marcj/angular2-localstorage) - Angular2 decorator to save and restore variables/class properties to HTML5 LocalStorage automatically. 496 | - [ng2-webstorage](https://github.com/PillowPillow/ng2-webstorage) - Localstorage and sessionstorage manager - angular2 service. 497 | - [angular-safeguard](https://github.com/MikaAK/angular-safeguard) - Wrapper around cookies/sessionStorage/localStorage for angular2. If all are unavailable will use an in memory storage. 498 | - [@ngx-cache/core](https://github.com/fulls1z3/ngx-cache) - Cache utility for Angular. 499 | 500 | ###### Cookie 501 | 502 | *Cookie manipulation* 503 | 504 | - [angular2-cookie](https://github.com/salemdar/angular2-cookie) - Implementation of Angular 1.x $cookies service to Angular 2. 505 | 506 | ###### Routing 507 | 508 | - [ng2-breadcrumb](https://github.com/gmostert/ng2-breadcrumb) - This is an angular 2 component that creates a breadcrumb trail. It hooks into the angular2/router, to dynamically build up the crumb trail once a component is routed to. 509 | - [ng2-page-transition](https://github.com/bergben/ng2-page-transition) - Simple Angular2 component to create a page transition animation on route changes. 510 | - [@ngx-i18n-router/core](https://github.com/fulls1z3/ngx-i18n-router) - Route internationalization utility for Angular. 511 | 512 | ###### Pagination 513 | 514 | - [ng2-pagination](https://github.com/michaelbromley/ng2-pagination) - Pagination for Angular. 515 | 516 | ###### Validation 517 | 518 | - [ng-validators](https://github.com/gangachris/ng-validators) - A List of validators for Angular 2+ Forms based on validator.js. 519 | - [ng2-validation](https://github.com/yuyang041060120/angular2-validate) - Angular2 validation. 520 | 521 | ###### i18n 522 | 523 | *Internationalization / L10n / localization / translation* 524 | 525 | - [@ngx-translate/core](https://github.com/ngx-translate/core) - The internationalization (i18n) library for Angular 2+. 526 | - [angular-l10n](https://github.com/robisim74/angular-l10n) - An Angular 2 library to translate messages, dates and numbers. 527 | - [@ngx-universal/translate-loader](https://github.com/fulls1z3/ngx-translate) - Loader for @ngx-translate that provides translations to browser/server platforms. 528 | 529 | ###### Logging 530 | 531 | - [angular2-logger](https://github.com/code-chunks/angular2-logger) - A log4j inspired logger for angular 2. 532 | - [@nsalaun/ng2-logger](https://github.com/noemi-salaun/ng2-logger) - Angular 2 logger service. 533 | 534 | ###### Asset management 535 | 536 | *Utilities for building / bundling / loading assets* 537 | 538 | - [plugin-typescript](https://github.com/frankwallis/plugin-typescript) - TypeScript loader for SystemJS. 539 | - [gulp-inline-ng2-template](https://github.com/ludohenin/gulp-inline-ng2-template) - Gulp plugin to inline HTML and CSS into Angular 2 component decorators. 540 | - [angular2-template-loader](https://github.com/TheLarkInn/angular2-template-loader) - Chain-to loader for webpack that inlines all html and style's in angular2 components. 541 | - [angular-router-loader](https://github.com/brandonroberts/angular-router-loader) - A Webpack loader that enables string-based module loading with the Angular Router. 542 | - [angular2-hot-loader](https://github.com/mgechev/angular2-hot-loader) - Angular 2 hot loader. 543 | 544 | ###### Meta Tags 545 | 546 | *Set meta tags, , children of <head>* 547 | 548 | - [ng2-meta](https://github.com/vinaygopinath/ng2-meta) - Dynamic meta tags and SEO in Angular2. 549 | - [@ngx-meta/core](https://github.com/fulls1z3/ngx-meta) - Dynamic page title & meta tags utility for Angular (w/server-side rendering). 550 | 551 | ###### Clipboard 552 | 553 | *Copy & paste text to clipboard* 554 | 555 | - [ngx-clipboard](https://github.com/maxisam/ngx-clipboard) - A wrapper directive for clipboard.js. 556 | 557 | ###### Angular 1 -> Angular 2 Migration 558 | 559 | - [ng-metadata](https://github.com/ngParty/ng-metadata) - Angular 2 decorators and utils for Angular 1.x. 560 | - [angular2-now](https://github.com/pbastowski/angular2-now) - Angular 2 @Component syntax for Angular 1 apps. 561 | 562 | ###### Documentation 563 | 564 | - [compodoc](https://github.com/compodoc/compodoc) - The missing documentation tool for your Angular application. 565 | 566 | ###### IoT 567 | 568 | *Internet of Things* 569 | 570 | - [angular2-iot](https://github.com/urish/angular2-iot) - Internet of Things directives for Angular 2 (Led, Button, etc.). 571 | - [@manekinekko/angular-web-bluetooth](https://github.com/manekinekko/angular-web-bluetooth) - The missing Web Bluetooth module for Angular (>=2). 572 | 573 | ###### Product Tour 574 | 575 | - [ng2-tour](https://github.com/isaacplmann/ng2-tour) - Product Tour. 576 | 577 | 578 | 579 | 580 | 581 | # Performance 582 | 583 | *Reduce amount of time the user has to wait in order to interact with the app* 584 | 585 | - [@angularclass/idle-preload](https://github.com/AngularClass/angular2-idle-preload) - Angular 2 Idle Preload for preloading async routes via @AngularClass. 586 | 587 | ###### Lazy Load 588 | 589 | - [ng2-lazyload-image](https://github.com/tjoskar/ng2-lazyload-image) - Lazy image loader for Angular 2. 590 | - [ng2-image-lazy-load](https://github.com/NathanWalker/ng2-image-lazy-load) - Angular2 image lazy loader library. 591 | 592 | 593 | 594 | 595 | 596 | 597 | 598 | # Integrations 599 | 600 | *Integrate with services or other frameworks* 601 | 602 | - [angularfire2](https://github.com/angular/angularfire2) - The official Angular 2 library for Firebase. 603 | - [ang2-jwt](https://github.com/auth0/angular2-jwt) - Helper library for handling JWTs in Angular 2 apps. 604 | - [angular2-react-native](https://github.com/angular/react-native-renderer) - Use Angular 2 and React Native to build applications for Android and iOS. 605 | - [angular2-meteor](https://github.com/Urigo/angular-meteor) - Angular and Meteor - The perfect stack. 606 | - [angulartics2](https://github.com/angulartics/angulartics2) - Vendor-agnostic analytics for Angular2 applications. 607 | - [perfectedtech-loopback-sdk-builder](https://github.com/mean-expert-official/loopback-sdk-builder) - Tool for auto-generating Software Development Kits (SDKs) for LoopBack. 608 | - [ng2-alfresco-core](https://github.com/Alfresco/alfresco-ng2-components) - Alfresco Angular 2 components. 609 | - [karma-typescript](https://github.com/monounity/karma-typescript) - Simplifying running unit tests with coverage for Typescript projects. 610 | - [meteor-rxjs](https://github.com/Urigo/mongo-rxjs-observable) - Exposing Mongo Cursor as RxJS Observable. 611 | - [wp-api-angular](https://github.com/shprink/wp-api-angular) - Angular (>=2) services for WordPress WP-API(v2) or WP >= 4.7 (natively supports WP-API). 612 | - [selfbits-angular2-sdk](https://github.com/selfbits/selfbits-angular2-sdk) - Angular 2 SDK for Selfbits Backend-as-a-Service. 613 | - [ng2-wp-api](https://github.com/MurhafSousli/ng2-wp-api) - Angular WordPress Module. 614 | - [angular2-disqus](https://github.com/Useful-Software-Solutions-Ltd/angular2-disqus) - A DISQUS integration for Angular2. 615 | - [angular2-cloudtasks](https://github.com/Cloudtasks/angular2-cloudtasks) - Helps using Cloudtasks.io image processing task by substituting your images sources with the processing URL. 616 | - [@cloudinary/angular](https://github.com/cloudinary/cloudinary_angular) - Cloudinary Angular client library. 617 | - [ng2-recaptcha](https://github.com/dethariel/ng2-recaptcha) - Angular 2 component for Google reCAPTCHA. 618 | - [angular2-recaptcha](https://github.com/xmaestro/angular2-recaptcha) - Angular 2 : Typescript component for Google reCaptcha. 619 | - [pubnub-angular2](https://github.com/pubnub/pubnub-angular2) - Official PubNub Angular2. 620 | - [ng2-awesome-disqus](https://github.com/MurhafSousli/ng2-disqus) - Disqus for Angular. 621 | - [angular2-esri-loader](https://github.com/tomwayson/angular2-esri-loader) - An Angular 2 service to help you load ArcGIS API for JavaScript Modules. 622 | - [@ngx-universal/state-transfer](https://github.com/fulls1z3/ngx-universal) - State transferring utility for Angular Universal. 623 | 624 | 625 | 626 | 627 | 628 | 629 | # Dev Tools 630 | 631 | - [@compodoc/ngd-cli](https://github.com/compodoc/ngd) - View the dependencies tree of you Angular2 application. 632 | - [angular-playground](https://github.com/SoCreate/angular-playground) - A drop in app module for working on Angular components in isolation (Angular version 2.x and above). 633 | - [@ngrx/store-devtools](https://github.com/ngrx/store-devtools) - Developer Tools for @ngrx/store. 634 | - [angular2-prettyjson](https://github.com/matiboy/angular2-prettyjson) - Angular 2 debug output of objects. Contains a pipe similar to JsonPipe but adds support for spacing and handling of circular structures. 635 | - [Augury](https://github.com/rangle/augury) - Angular 2 development tools for Chrome. 636 | - [angular-webpack-config](https://github.com/ng-seed/angular-webpack-config) - Shared Webpack config for Angular development. 637 | 638 | 639 | 640 | 641 | 642 | # Starter Kit 643 | 644 | *Boilerplate / scaffold / Yeoman generator / stack ensemble / seed* 645 | 646 | - [@angular/cli](https://github.com/angular/angular-cli) - Official CLI tool for Angular. 647 | - [test-angular-seed-project](https://github.com/angular/angular2-seed) - A simple starter Angular2 project. 648 | - [poke-try-harder](https://github.com/antonybudianto/angular2-starter) - Extensible Angular 2 Starter using TypeScript (Updated to 2.4.3). 649 | - [generator-ng-fullstack](https://github.com/ericmdantas/generator-ng-fullstack) - Client, server or fullstack - it's up to you. ng-fullstack gives you the best of the latest: Node, Go, http/2, Angular 1, Angular 2, Express, MongoDB, Gulp, Babel, Typescript and much more. 650 | - [generator-angular2](https://github.com/swirlycheetah/generator-angular2) - A Yeoman Generator to create Angular2 apps right now. 651 | - [generator-ng2-webpack](https://github.com/cmelion/generator-ng2-webpack) - An opinionated tool for scaffolding an app using angular2 and webpack. 652 | - [generator-modern-web-dev](https://github.com/dsebastien/modernWebDevGenerator) - A Yeoman generator for Modern Web development projects. 653 | - [generator-gulp-angular2](https://github.com/x6doooo/generator-gulp-angular2) - Yeoman generator for Angular2 + Gulp, base on angular2-seed and generator-gulp-angular. 654 | - [asaf-test](https://github.com/preboot/angular-library-seed) - Get started building an Angular library quickly. 655 | - [@manekinekko/angular-library-starter](https://github.com/manekinekko/angular-library-starter) - A Minimalist Starter for Angular (v2+) libraries (w/ AOT support). 656 | - [angular2-webpack-starter](https://github.com/AngularClass/angular2-webpack-starter) - An Angular Starter kit featuring Angular 2 and Angular 4 (Router, Http, Forms, Services, Tests, E2E, Dev/Prod, HMR, Async/Lazy Routes, AoT via ngc), Karma, Protractor, Jasmine, Istanbul, TypeScript 2, TsLint, Codelyzer, Hot Module Replacement, @types, and Webpack 2 by @AngularClass. 657 | - [angular2-universal-starter](https://github.com/alexpods/angular2-universal-starter) - Enjoy Server Side rendering and Web Workers in your Angular2 Application. 658 | - [angular-seed](https://github.com/mgechev/angular-seed) - Extensible, reliable and modular starter project for Angular 2 (and beyond) with statically typed build and AoT compilation. 659 | - [clarity-seed](https://github.com/vmware/clarity-seed) - This is a repository for a seed project that includes Clarity Design System's dependencies. 660 | - [Angular 2 Webpack](https://github.com/preboot/angular2-webpack) - A complete, yet simple, starter for Angular 2 using webpack 661 | - [Colmena CMS](https://github.com/colmena/colmena-cms) - Free and Open Source API and Admin powered by LoopBack and Angular. 662 | - [@ng-seed/universal](https://github.com/ng-seed/universal) - Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Material Design & Flexbox, Webpack, dev/prod modes, DLLs, AoT compilation, HMR, SCSS compilation, lazy loading, @ngrx/store, config, cache, i18n, SEO, angulartics2 and TSLint/codelyzer. 663 | 664 | --------------------------------------------------------------------------------