List.community

Awesome Angular

Awesome Angular Awesome Build Status

Awesome list of Angular seed repos, starters, boilerplates, examples, tutorials, components, modules, videos, and anything else in the Angular ecosystem. View as github page.

If you're looking for AngularJS (version 1.x.x) please visit https://github.com/gianarb/awesome-angularjs345 37

Current Angular version:

npm version

Current Browser support for Angular:

Sauce Test Status

Tipe

Table of contents:

Angular

Angular is a development platform for building mobile and desktop web applications.

Official Resources

Community

Angular Team on twitter

Experts on Twitter

List of Angular experts you should follow on Twitter (in no particular order). This list is by no means complete.

Google Developer Experts

Server-Side Rendering

Material Design

  • Official Angular Material Design (GitHub)14k 4k
  • md2 Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Collapse, Colorpicker, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Switch, Tabs, Tags(Chips), Toast and Tooltip.
  • ng2-material set of material2 examples and extra components (data table, dialog, ...) built on top of @angular2-material/core
  • angular2-mdl Angular 2 components, directives and styles based on Material Design Lite
  • mdl-ext Material Design Lite Ext (carusel, grid, lightbox, selectfield, sticky header, ...)
  • ng2-materialize225 55 An Angular 2 wrap around Materialize library
  • Material Light28 3 Light, fast and easy to use Material Design components for Angular 2+ (Especially for mobile UI). There are several alternatives but this one has added value and advantages in my opinion (Take a loot at the Readme.md for details). There is also an online demo to see it in action. (API documentation is still lacking but in process).
  • Blox Material6 3 A lightweight Material Design library for Angular, based upon Google's Material Components for the Web.

Cheatsheet

Features

Directives

Directives allow you to attach behavior to elements in the DOM.

Components

A component is a directive which uses shadow DOM to create encapsulate visual behavior. Components are typically used to create UI widgets or to break up the application into smaller components.

View

A View is a core primitive used by angular to render the DOM tree.

Templates

Templates are markup which is added to HTML to declaratively describe how the application model should be projected to DOM as well as which DOM events should invoke which methods on the controller.

Change detection

Every component gets a change detector responsible for checking the bindings defined in its template.

Dependency Injection

Angular 1.x has two APIs for injecting dependencies into a directive. Angular 2 unifies the two APIs, making the code easier to understand and test.

Pipes

Pipes can be appended on the end of the expressions to translate the value to a different format.

Web Workers

WebWorker support in Angular is designed to make it easy to leverage parallelization in your web application. When you choose to run your application in a WebWorker angular runs both your application's logic and the majority of the core angular framework in a WebWorker.

HTTP

Http is available as an injectable class, with methods to perform http requests. Calling request returns an EventEmitter which will emit a single Response when a response is received.

Router
Test
Ahead-of-Time Compilation

Angular CLI

Webpack

Series

Video Tutorials

Style Guides

Angular Connect

Books

On-Site Training

Approach and Explanation

Integrations

Third Party Components

  • Material 214k 4k - Angular team's Material Design components built on top of Angular 2 GitHub stars GitHub last commit GitHub commit activity the past week, 4 weeks, year

  • NG ZORRO2k 452 - An enterprise-class UI components based on Ant Design and Angular.

  • Element Angular12 7 - Element Design components built on top of Angular 2

  • Axponents: of Accessible Web Components (Dylan Barrell)22 14

  • ng2-bootstrap2k 608 Native Angular2 Bootstrap 3&4 components

  • ng2-charts832 324 Beautiful charts for Angular2 based on Chart.js

  • ng2-dragula875 250 Drag and Drop so simple it hurts!

  • ng2-file-upload897 354 Easy to use file upload directives

  • ng2-handsontable203 84 Excel-like data grid / spreadsheet

  • ng2-markdown13 1 Angular2 Markdown Web Component

  • ng2-select493 483 Angular2 based replacement for select boxes

  • ng2-safe-img Very tiny and safe img for Angular 2

  • ng2-table419 253 Simple table extension with sorting, filtering, paging... for Angular2 apps

  • ng2-smart-table559 264 Smart data table library with sorting, filtering, pagination & add/edit/delete functions.

  • ng2-bs10 1 Experiments with Angular 2 directives for Bootstrap.

  • ng-lightning505 82 Native Angular 2 components & directives for Lightning Design System

  • ag-grid Advanced Datagrid for Pure Javascript / AngularJS 1.x / AngularJS 2 / Web Components

  • angular2-query-builder10 6 Modernized query builder based on jquery QueryBuilder

  • angular2-grid288 151 A drag/drop/resize grid-based plugin directive for angular2.

  • angular2-jwt2k 390 Library for sending authenticated HTTP requests and decoding JWTs

  • angular2-cookie97 27 Library that implements Angular 1.x $cookies service in Angular 2

  • angular2-fontawesome53 28 Angular2 Components and Directives for Fontawesome

  • angular-safeguard21 5 Wrapper around cookies/sessionStorage/localStorage for angular2. If all are unavailable will use an in memory storage.

  • angular2-google-maps262 122 Angular2 directives for Google Maps

  • angular-cesium30 20 Creating map based web apps using Cesium and Angular

  • ng2-radio-group Angular2 directives for radio and checkbox inputs and radio input groups

  • ng2-dropdown Dropdown menu for angular2 and bootstrap 3

  • angular2-multiselect-dropdown53 54 Angular 2 multiselect dropdown component for web applications

  • ng2-progress-bar Simple progress bar for angular2 and bootstrap 3

  • ng2-tabs Tabs control for angular2 and bootstrap 3

  • ng2-modal Modal window for angular2 and bootstrap 3

  • ng2-sheet Angular2 Components to add yours components inside a sheet window and repeatedly

  • ng2-paginator Pagination control for angular2 and bootstrap 3

  • fuel-ui267 67 Bootstrap 4 components and directives for use in Angular 2

  • prime-ng Collection of rich UI components for Angular 2

  • ng2-ace24 15 Ace editor directive made for Angular 2

  • ng2-storage14 3 A localStorage and sessionStorage wrapper written using ES6 Proxies for Angular 2

  • ng2-fontawesome14 4 A small directive making font awesome even easier to use.

  • ng2-sweetalert240 16 A wrapper for sweetalert2 for use with Angular 2.

  • angular2-text-mask3k 384 Angular 2 input mask directive

  • angular-imask1k 39 Angular 4+ input mask

  • ng2-fullpage45 16 Fullpage scrolling for Angular2 based on fullPage.js

  • file-droppa45 20 Simple files drop and upload component with files list

  • ngx-img-fallback Load placeholder image on image error

  • angular2-busy167 73 Show busy/loading indicators on any promise, or on any Observable's subscription

  • ng2-pdf-viewer257 105 PDF viewer component

  • Covalent - a UI platform built on Angular 2.0 + Material Design

  • angular2-infinite-scroll - An Infinite Scroll Directive for Angular2 (based on Observables)

  • ng2-card - Card view component for Angular2

  • Wijmo 5 - Set of UI components for Angular2

  • ng2-swipeable-card12 3 - Swipeable card component for Angular2

  • ngSemantic820 155 - UI components based on Semantic UI

  • vmware clarity3k 340 - Mostly a CSS only framework but some components are ported to Angular 2

  • Teradata covalent2k 299 - UI Platform built on @angular/material 2.0

  • ng2-quill-editor43 22 - Quill editor component for Angular2

  • ngx-charts1k 255 - Declarative Charting Framework for Angular2 and beyond!

  • ngx-datatable2k 622 A feature-rich yet lightweight data-table crafted for Angular2 and beyond!

  • ngx-ui291 56 - Style and Component Library for Angular2 and beyond!

  • Cloudinary285 212 - Angular2 SDK for image and video management in the cloud

  • angular2-simple-countdown - a simple countdown angular2 directive with multiple language

  • ng-http-cache14 3 - Speed up your remote requests by automatically caching them on client.

  • ng-animate29 2 - 🌙 A collection of cool, reusable and flexible animations for Angular

  • lottie-angular220 4 - Render After Effects animations on Angular2 based on Bodymovin.

  • ngx-restangular - Restangular for Angular 2 and higher versions.

  • ngfb-sortable-table1 1 - Angular Firebase Sortable Table. Ability to filter and sort data with own firebase quering tools.

  • angular-split31 6 Angular split component

  • od-virtualscroll18 5 Observable-based virtual scroll implementation in Angular

  • angular2-froala-wysiwyg140 31 Angular 2 wrapper for Froala WYSIWYG HTML Editor

  • ngx-meta41 10 - Dynamic page title & meta tags utility for Angular (w/server-side rendering) by @fulls1z3

  • ngx-config6 1 - Configuration utility for Angular (incl. Angular Universal loader) by @fulls1z3

  • ngx-cache11 2 - Cache utility for Angular (incl. browser & server platform implementations) by @fulls1z3

  • ngx-i18n-router - Route internationalization utility for Angular by @fulls1z3

  • ngx-auth7 2 -Authentication utility for Angular by @fulls1z3

  • angular2-promise-buttons23 6 - Loading buttons for Angular 2 by @johannesjo

  • ng2-archwizard58 21 - Wizard component for Angular 2

  • ngx-popper48 15 - Tooltip managment, wrapper for popper.js(https://popper.js.org/)

  • ngx-avatar4 1 - Avatar component that makes it possible to genearte / fetch avatar based on the information you have about the user.

  • ngx-qrcode2 - An Angular 4+ Component library for Generating QR (Quick Response ) Codes

  • ng2-permission - Fully featured permission based access control for your angular 4+ applications. This module inspired from angular-permission.

  • ng-s-resource - Simplify RESTful http resource generator for Angular 4+.

  • ng-data-picker - 🏄🏼 A data picker based on Angular 4+ (like iOS native datetime picker)

  • ngx-siema21 11 - Lightweight and simple carousel with no dependencies.

  • ng-bootstrap - Angular 4 directives for Bootstrap 4 by the ui-bootstrap team

  • ng-snotify115 20 - Angular 4 Notification Center

  • ngx-permissions134 19 - Permission and roles based access control for your angular(angular 2, angular 4,5+) applications(AOT, lazy modules compatible)

  • Nebular891 173 - set of essential (Theme, UI Kit, Auth, Security) modules for complex Angular applications

  • ng-select104 27 Angular ng-select - All in One UI Select, Multiselect and Autocomplete

  • ng-katex19 2 Angular module to write beautiful math expressions with TeX syntax boosted by KaTeX library

  • ng-fullcalendar15 5 Jquery fullcalendar module for Angular

  • angular-bootstrap-md Material Design for Bootstrap 4 (Angular)

  • ngx-konami - Simple directive to add easter eggs in Angular 2+ applications

  • ngx-mapbox-gl8 2 - Angular binding of mapbox-gl-js

Site Templates

Pipes

  • fuel-ui267 67 OrderBy and Range pipes ported from Angular 1.x to Angular 2
  • ngx-filter-pipe2 2 Pipe for filtering arrays
  • ngx-pipes359 46 Bunch of useful pipes for Angular2 and beyond!
  • ngx-order-pipe41 14 OrderBy pipe for Angular4+ - sort collection by a field
  • angular2-camelcase Angular2 pipe to convert camelCase strings to human readable strings Edit

Generators

Documentation tools

  • Storybook10k 941 : "The UI development environment you'll love to use"

  • Compodoc1k 117 : "The missing documentation tool for your Angular 2 application", integrate well with npm scripts

  • AngularDoc : Website that display "Architectural analysis and visualization for Angular 2 projects", integrate only with a github repository

  • NgModule-Viz10 3 : Visualize the dependencies between the NgModules in your Angular 2+ application.

TodoMVC

Universal Angular 2

Universal (isomorphic) javascript support for Angular 2

Universal General Resources

Universal Seed Projects

  • universal-starter1k 646 - Angular 2 Universal starter kit by @Angular-Class
  • ng-seed/universal254 94 - Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, dev/prod modes, DLLs, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer by @fulls1z3

Angular 2 in TypeScript

TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

TypeScript General Resources

TypeScript Seed Projects

Ionic 2 in Angular 2

Ionic is the beautiful, open source front-end SDK for developing hybrid mobile apps with web technologies.

Ionic 2 General Resources

Angular 2 in Cordova

Apache Cordova is a popular mobile application development framework using CSS3, HTML5, and JavaScript instead of relying on platform-specific APIs.

Cordova Seed Projects

Angular 2 in Dart

Dart is an open-source, scalable programming language, with robust libraries and runtimes, for building web, server, and mobile apps.

Dart General Resources

  • Dart Official Website for Dart
  • Dartpad Dartpad lets play with Dart on-line, in a zero-install, zero configuration environment.
  • Dart Organization (GitHub) Official GitHub Organization for Dart
  • Pub Repository of packages of software for the Dart programming language.
  • Dartisans The Official Dart Google+ community
  • Dart Slack Channel The Official Dart Slack channel.

Dart Seed Projects

Dart Demo, Samples, and Examples

Angular 2 in Traceur

Traceur is a JavaScript.next-to-JavaScript-of-today compiler

Traceur General Resources

Traceur Seed Projects

Angular 2 in Babel

The compiler for writing next generation JavaScript.

Babel General Resources

Babel Angular 2 Online Playground

Babel Seed Projects

Babel Demo, Samples, and Examples

Babel Plugins

Angular 2 in ES5

An ECMAScript language that includes structured, dynamic, functional, and prototype-based features.

ES5 General Resources

ES5 Seed Projects

angular2-es5-starter-kit Angular2 ES5 Starter Kit

Meteor in Angular 2

Build Realtime Web and Mobile Apps With Angular and Meteor

Meteor General Resources

Meteor Seed Projects

Angular 2 in NativeScript

Build truly native iOS, Android and Windows Phone apps with Javascript and CSS. Try NativeScript open-source framework for cross-platform development.

NativeScript General Resources

NativeScript Seed Projects

Angular 2 in React Native

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript

React Native General Resources

React Native Projects

React Native Seed Projects

Angular 2 in Haxe

Haxe is an open source toolkit based on a modern, high level, strictly typed programming language, a cross-compiler, a complete cross-platform standard library and ways to access each platform's native capabilities. General purpose language, with Haxe, you can easily build cross-platform tools targeting all the mainstream platforms natively. "Write once compile anywhere", with strong easily extendable macro system and powerfull, highly optimizing compiler with DCE (and f.e. using inline constructors). Can be used for server side rendering and in isomorphic way - possible to share the same source code compiling into client side in javascript and server side in pyhton (or java/php/node - can be choosen later/changed at scaling). Haxe code can contain (inline) any target language fragments (can be used to step by step porting), the externs mechanism provides access to the native APIs and libraries in a type-safe manner. Server, client, mobile (Android and iOS at once), desktop, embedded (Raspbery, award winning TIVO set top boxes), Playstation ... all can be reached natively with much less typing, more error-proof, more stable and compile-time type checked code even for non type-safe targets (f.e. JavaScript, PHP)!

Haxe General Resources

Haxe Seed Projects

Angular 2 in Scala

General purpose language; multiparadigm (object-oriented, functional, concurrent elements); statically typed, type-safe; focus: Web services.

Scala General Resources

Scala Seed Projects

Angular 2 components with Bit

Bit is an open source virtual repository (code base) built to make components easily manageable and usable across applications. You can quickly export any Angular component from any context while working on any project to a bit distributed Scope. Bit's reusbale component environment cuts the overhead of configuring build and test environments for exporting every new component. The Scope is a virtual component repository which stores, organizes, manages and tests your components. Once modeled on a Scope, your components can be easily found and used in any Angular application. Components can be organized together and still modified and used individually without pulling in entire libraries.

Bit Resources
  • Bit991 62
  • Bit-Javascript1 1
  • bitsrc - Free community hub for sharing, managing and finding open source components.

Security

NgRx

enjoy — PatrickJS

License

CC0