Awesome Angular 2

Awesome list of Angular 2 seed repos, starters, boilerplates, examples, tutorials, components, modules, videos, and anything else in the Angular 2 ecosystem

Current Angular 2 version:

Current Browser support for Angular 2:

Table of contents:

Angular 2
Universal
- Universal General Resources
- Seed Projects
TypeScript
- TypeScript General Resources
- Seed Projects
Dart
- Seed Projects
Traceur
- Traceur General Resources
- Seed Projects
Babel
ES5
- Seed Projects
Ionic 2
- Ionic 2 General Resources
Meteor
- Meteor General Resources
- Seed Projects
NativeScript
- NativeScript General Resources
- Seed Projects
React Native
- React Native General Resources
- React Native Projects
Haxe
- Seed Projects
Scala
- Seed Projects
Security
NgRx

Angular 2

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

Official Resources

Community

#angular2 channel on Freenode IRC Server
#angular2 hashtag on Twitter
Gitter Channel
Angular 2 StackOverflow
@AngularJS on Twitter
/r/Angular2 Subreddit
Angular Group on Facebook
AngularJS on Google+
AngularAir podcast and live broadcast
Adventures in Angular podcast
ng-newsletter email newsletter
tryangular2
Built With Angular 2
#ng-2 Slack Channel on AngularBuddies (Sign up)
#angular2 Slack Channel on dartlang.slack.com (Sign up)

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

Angular 2 Universal Repository (GitHub)

Material Design

Official Angular 2 Material Design (GitHub)

Cheatsheet

Features

Annotations

Directives

Directives allow you to attach behavior to elements in the DOM.
Read more »

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.
Read more »

View

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

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.
Read more »

Change detection

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

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.
Read more »

Pipes

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

Web Workers

WebWorker support in Angular2 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.
Read more »

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.
Read more »

Router

Test

Angular CLI

Webpack

Official web page
Angular 2 Webpack Starter from AngularClass
Angular 2 Webpack from preboot
Angular 2 Webpack with Visual Studio ASP.NET Core from Damien Bowden
Angular 2 Typescript Webpack from schempy
Angular 2 Webpack Tour of Heroes from michaelbazos - Tour of Heroes official typescript tutorial built with webpack
Angular 2 ASP.NET Core Spa from SteveSandersonMS

Series

Ionic
- Angular 2
  - Introduction
  - Components
Auth0
- Angular 2
thoughtram
- Angular 2 Template Syntax Demystified
  - Part 1

Video Tutorials

Style Guides

Official Angular 2 Style guide

Angular Connect

Books

ng-book 2 fullstack.io
Become a ninja with Angular 2 Ninja Squad
Angular 2 Development with TypeScript Manning Publications
Angular 2 in Action Manning Publications
Practical Angular 2 Leanpub
Switching to Angular 2 Packt Publishing
Testing Angular 2 Applications Manning Publications
Rangle's Angular 2 training Rangle.io

On-Site Training

Approach and Explanation

Integrations

Components

Material 2 - Angular team's Material Design components built on top of Angular 2
Axponents: of Accessible Web Components (Dylan Barrell)
ng2-bootstrap Native Angular2 Bootstrap 3&4 components
ng2-charts Beautiful charts for Angular2 based on Chart.js
ng2-dragula Drag and Drop so simple it hurts!
ng2-file-upload Easy to use file upload directives
ng2-handsontable Excel-like data grid / spreadsheet
ng2-select Angular2 based replacement for select boxes
ng2-table Simple table extension with sorting, filtering, paging... for Angular2 apps
ng2-bs Experiments with Angular 2 directives for Bootstrap.
ag-grid Advanced Datagrid for Pure Javascript / AngularJS 1.x / AngularJS 2 / Web Components
angular2-jwt Library for sending authenticated HTTP requests and decoding JWTs
angular2-cookie Library that implements Angular 1.x $cookies service in Angular 2
angular2-fontawesome Angular2 Components and Directives for Fontawesome
angular2-locker Library for interfacing with Localstorage/session/cookies with in-memory backup
angular2-google-maps Angular2 directives for Google Maps
ng2-radio-group Angular2 directives for radio and checkbox inputs and radio input groups
ng2-dropdown Dropdown menu for angular2 and bootstrap 3
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-paginator Pagination control for angular2 and bootstrap 3
fuel-ui Bootstrap 4 components and directives for use in Angular 2
prime-ng Collection of rich UI components for Angular 2
ng2-ace Ace editor directive made for Angular 2
ng2-storage A localStorage and sessionStorage wrapper written using ES6 Proxies for Angular 2
ng2-fontawesome A small directive making font awesome even easier to use.
ng2-sweetalert2 A wrapper for sweetalert2 for use with Angular 2.
angular2-text-mask Angular 2 text masking directive for input elements
ng2-fullpage Fullpage scrolling for Angular2 based on fullPage.js
file-droppa Simple files drop and upload component with files list
ng2-img-fallback Load placeholder image on image error
angular2-data-table A feature-rich yet lightweight data-table crafted for Angular2
angular2-busy Show busy/loading indicators on any promise, or on any Observable's subscription
ng2-pdf-viewer 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

Pipes

fuel-ui OrderBy and Range pipes ported from Angular 1.x to Angular 2
ng2-filter-pipe Pipe for filtering arrays

Generators

Node.js
- Slush
  - TheVelourFog/slush-angular2
- Yeoman
  - swirlycheetah/generator-angular2
- Faristo
  - majodi/generator-angular2
Dart
- Stagehand
  - google/stagehand

TodoMVC

Universal Angular 2

Universal (isomorphic) javascript support for Angular 2

Universal General Resources

Universal Angular 2 Repository (GitHub)

Universal Seed Projects

universal-starter - Angular 2 Universal starter kit by @Angular-Class

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 Official Website for TypeScript
REPL Official TypeScript REPL that runs entirely in your browser
TypeScript Repository (GitHub) Official GitHub Repo for TypeScript
TSD TypeScript Definition manager for DefinitelyTyped
DefinitelyTyped Repository (GitHub) The repository for high quality TypeScript type definitions.

TypeScript Seed Projects

Angular 2 Webpack Starter - An Angular 2 Webpack Starter kit featuring Angular 2 (Router, Http, Forms, Services, Tests, E2E), Karma, Protractor, Jasmine, TypeScript, and Webpack by @Angular-Class
Angular 2 Seed Seed project for Angular 2 apps
angular2-ts-seed - A complete, yet simple, starter for Angular 2 using TypeScript
ng2-play A minimal Angular2 playground using TypeScript and SystemJS loader
NG2 Lab A simple Angular 2 setup using TypeScript, SystemJS and Firebase that also includes a few examples of unit testing and CI with Travis and Saucelabs.
Angular2Go Angular 2 Go !
Angular 2 Samples Angular 2.0 sample components
Todo app with Firebase, OAuth, and Immutable
Spring Boot and Angular2 tutorial Angular2 practical example based on Rails tutorial.
Angular 2 Goldilocks seed - A seed project for Angular 2 and TypeScript that is not too simple, yet not too complex. In fact it's just right!
Angular 2 Starter - Simple Angular 2 Starter with Gulp workflow and Travis CI
Angular 2 Leaflet Starter - A map application starter based on Angular 2 and Leaflet
Angular 2 MapboxGL Starter - Another map application starter based on Angular 2 and MapboxGL JS
Angular 2 reconnecting websockets quickstart - Simple counter using 2-way or 1-way reconnecting websockets communication
ng2-start - Minimal setup to start creating an angular2 application
ng2Boilerplate - The ultimate Angular 2 bootstrap single page app - touches on all key and advanced aspects of Angular2.
angular2-demo Minimal Angular2 Demo using TypeScript / Sass / Npm Tasks
Angular 2 Dashboard Starter - Ready to use dashboard control panel seed project based on Angular 2 and AdminLTE bootstrap theme.
ng2-admin - Beautiful admin panel framework based on Angular 2, Bootstrap 4 and Webpack
Angular 2 quickstart seed
Angular 2 full code coverage - Solid tested SystemJS and gulp workflow ready for your code using rc-3 .. Demonstrates unit testing and full code coverage
Angular 2 webpack - Tour of Heroes official typescript tutorial built with webpack
{{ add_your_repo }}

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

Angular 2 Dart Quickstart A minimal quick start project.

Dart Demo, Samples, and Examples

Angular 2 Samples Angular 2 for Dart demos and samples from the community.
Pipes Examples of Pipes in Angular 2 for Dart.
Hackernews App A HackerNews application made with Angular 2 for Dart
Router Demo A basic example of Angular 2 router.
{{ add_your_repo }}

Angular 2 in Traceur

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

Traceur General Resources

Traceur Repository (GitHub) Official GitHub Repo for Traceur

Traceur Seed Projects

Angular 2 in Babel

The compiler for writing next generation JavaScript.

Babel General Resources

Babel Official Website for Babel
REPL Official Babel REPL that runs entirely in your browser
Babel Repository (GitHub) Official GitHub Repo for Babel

Babel Angular 2 Online Playground

Plunker: Angular 2 + Babel

Babel Seed Projects

babel-angular2-app A skeleton Angular 2 app built with Babel and Browserify.
angular2-fullstack-starter A full stack skeleton Angular 2 app built with Webpack/Babel.
angular2-es6-starter A skeleton Angular 2 ES6 application built with Babel, Webpack, Gulp.
angular2-es-seed A complete, yet simple, starter for Angular 2 using ES2016.
angular2-babel-quickstart The super simple Angular 2 quickstarter with ES6/Babel
{{ add_your_repo }}

Babel Demo, Samples, and Examples

angular2-es6-todomvc Angular 2 TodoMVC implementation with ES6.
{{ add_your_repo }}

Babel Plugins

babel-preset-angular2 Babel presets for Angular2
babel-plugin-type-assertion An experimental babel transformer plugin for rtts_assert

Angular 2 in ES5

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

ES5 General Resources

{{ help_add_resources }}

ES5 Seed Projects

{{ add_your_repo }}

Ionic 2 in Angular 2

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

Ionic Framework Official Website for Ionic Framework
Ionic Documentation Official for Ionic Framework

Ionic 2 General Resources

Meteor in Angular 2

Build Realtime Web and Mobile Apps With Angular and Meteor

Meteor General Resources

Angular Meteor Official Website for Angular Meteor
Angular 2 Meteor

Meteor Seed Projects

{{ add_your_repo }}

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 Official Website for NativeScript

NativeScript Seed Projects

sample-Angular2
{{ add_your_repo }}

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 Official Website for React Native

React Native Projects

Angular 2 React Native Renderer (GitHub)

React Native Seed Projects

{{ add_your_repo }}

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.org
Haxe on Wikipedia
Haxe Playground
Haxe compiler targets compiler targets: C++, C#, Java, Python, PHP, ActionScript 3, and Flash or Neko bytecode
Haxe Usage Survey results
Haxe discussion group - community
Haxe and Node.js
Haxe Resource - some "hub" for articles
Haxe: working with JavaScript libraries
Learn haxe in Y minutes
A success story for Haxe - about porting JavaScript to haxe targeting both JavaScript and C# "without interrupting the development of actual game by the rest of the team!", "AWESOME BONUS", "there are only benefits"
News And Information For Haxe Developers
{{ help_add_resources }}

Haxe Seed Projects

angular2haxe Haxe Language Bindings for Angular 2
{{ add_your_repo }}

Angular 2 in Scala

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

Scala General Resources

{{ help_add_resources }}

Scala Seed Projects

Security

NgRx

License

License

angularsnipp/awesome-angular2

ErrorLooks like something went wrong!

About

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages