Top Angular Resources

Useful angular links. Official and community.

0

Jump to a section:

Official Resources

Community

Angular Team on twitter

Server-Side Rendering

Material Design

  • Official Angular 2 Material Design (GitHub)
  • 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-materialize An Angular 2 wrap around Materialize library
  • Material Light 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).

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.

Router
Test
Ahead-of-Time Compilation

Angular CLI

Webpack

Series

Video Tutorials

Style Guides

Angular Connect

Books

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-safe-img Very tiny and safe img for Angular 2
  • ng2-table Simple table extension with sorting, filtering, paging… for Angular2 apps
  • ng2-smart-table Smart data table library with sorting, filtering, pagination & add/edit/delete functions.
  • ng2-bs Experiments with Angular 2 directives for Bootstrap.
  • ng-lightning Native Angular 2 components & directives for Lightning Design System
  • ag-grid Advanced Datagrid for Pure Javascript / AngularJS 1.x / AngularJS 2 / Web Components
  • angular2-grid A drag/drop/resize grid-based plugin directive for angular2.
  • 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
  • angular-safeguard Wrapper around cookies/sessionStorage/localStorage for angular2. If all are unavailable will use an in memory storage.
  • 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 input mask directive
  • 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-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
  • Wijmo 5 – Set of UI components for Angular2
  • ng2-swipeable-card – Swipeable card component for Angular2
  • ng2-date-picker – Highly configurable date picker built for Angular 2 applications
  • ngSemantic – UI components based on Semantic UI
  • vmware clarity – Mostly a CSS only framework but some components are ported to Angular 2
  • Teradata covalent – UI Platform built on @angular/material 2.0
  • ng2-quill-editor – Quill editor component for Angular2
  • ngx-charts – Declarative Charting Framework for Angular2 and beyond!
  • ngx-datatable A feature-rich yet lightweight data-table crafted for Angular2 and beyond!
  • ngx-ui – Style and Component Library for Angular2 and beyond!
  • Cloudinary – Angular2 SDK for image and video management in the cloud
  • angular2-simple-countdown – a simple countdown angular2 directive with multiple language
  • ng-http-cache – Speed up your remote requests by automatically caching them on client.
  • lottie-angular2 – Render After Effects animations on Angular2 based on Bodymovin.
  • ngx-restangular – Restangular for Angular 2 and higher versions.
  • ngfb-sortable-table – Angular Firebase Sortable Table. Ability to filter and sort data with own firebase quering tools.
  • angular-split Angular split component
  • od-virtualscroll Observable-based virtual scroll implementation in Angular
  • angular2-froala-wysiwyg Angular 2 wrapper for Froala WYSIWYG HTML Editor
  • ngx-meta/core – Dynamic page title & meta tags utility for Angular (w/server-side rendering) by @fulls1z3
  • ngx-config/core – Configuration utility for Angular (incl. Angular Universal loader) by @fulls1z3
  • ngx-cache/core – Cache utility for Angular (incl. browser & server platform implementations) by @fulls1z3
  • ngx-i18n-router/core – Route internationalization utility for Angular by @fulls1z3
  • angular2-promise-buttons – Loading buttons for Angular 2 by @johannesjo
  • ng2-archwizard – Wizard component for Angular 2

Pipes

  • fuel-ui OrderBy and Range pipes ported from Angular 1.x to Angular 2
  • ng2-filter-pipe Pipe for filtering arrays
  • ngx-pipes Bunch of useful pipes for Angular2 and beyond!
  • ng2-order-pipe OrderBy pipe for Angular2 – sort collection by a field
  • angular2-camelcase Angular2 pipe to convert camelCase strings to human readable strings Edit

Generators

Documentation tools

  • Compodoc : “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-Viz : 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-starter – Angular 2 Universal starter kit by @Angular-Class
  • ng-seed/universal – 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 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


Angular 2 in Scala

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

Scala Seed Projects

Security

NgRx

You might also like More from author

Leave A Reply

Your email address will not be published.