awesome-angular-components

Catalog of Angular 2+ Components & Libraries

2 years after

Angular 2+ Components & Libraries


Contents





UI Components

Overlay

Display overlay / modal / alert / dialog / lightbox / popup

Notification

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

  • angular2-toaster - Angular2-toaster is an asynchronous, non-blocking Angular2 Toaster Notification library.
  • ng2-toasty - Angular2 Toasty component shows growl-style alerts and messages for your app.
  • ng2-notifications - Angular 2 Component for Native Push Notifications.
  • toastr-ng2 - Angular 2 toastr.
  • @ngrx/notify - Web Notifications Powered by RxJS for Angular.
  • angular2-notifications - A light and easy to use notifications library for Angular 2. It features both regular page notifications (toasts) and push notifications.
Popover

Show a little dialog next to an element

Menu

Menu / sidebar

Loading / Progress Indicators

Let the user know that something is being loaded

Table

Table / Data Grid — Display (large) datasets

Tree

Visualize data as a tree

  • angular2-tree-component - A simple yet powerful tree component for Angular2.
  • ng2-tree - Angular2 component for visualizing data that can be naturally represented as a tree.
Time

Display time / date / age

Charts
Map
Infinite Scroll
Audio / Video
SVG
  • ng-inline-svg - Angular 2+ directive for inserting an SVG file inline within an element.
PDF

Form

Let the user create & edit data

Select
  • ng2-select - Angular2 based replacement for select boxes.
  • angular2-select - A native angular 2 select component (based on select2).
Autocomplete

Autosuggest / autocomplete / typeahead

Date Picker

Time Picker / Datetime Picker

Drag and Drop
Masked Input
Calendar

Show & edit events in a calendar view

  • angular2-calendar - A flexible calendar component for angular 2.0+ that can display events on a month, week or day view.
Rich Text Editor
File Upload
Autosize Input / Textarea
  • angular2-autosize - Angular2-autosize is an Angular2 directive that automatically adjusts textarea height to fit content.
Image Editing

Image manipulation

UI Layout

Layout for the overall / main view

Responsive

UI Frameworks

Responsive

Mobile

  • ionic2 - Build amazing native and progressive web apps with Angular and open web technologies. One app running on everything.
  • angular2-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.

Component Collections

  • @angular/material - Official Material Design components for Angular.
  • primeng - UI Components for Angular 2.
  • ng-lightning - Native Angular 2 components & directives for Lightning Design System.
  • angular2-mdl-miracle - Angular 2 components, directives and styles based on material design lite.
  • fuel-ui - UI Components for use with Angular2 and Bootstrap4.
  • igniteui-angular2 - Ignite UI directives for Angular 2.
  • 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.
  • igniteui-js-blocks - Mobile-first Angular native components.
  • devextreme-angular - Angular 2 UI and visualization components based on DevExtreme widgets.

Code Structure

Improve overall design of the source code

Data Management

Data flow / data store / data flow

  • wfw-ng2-redux - Angular 2 bindings for Redux.
  • @ngrx/store - RxJS powered state management for Angular applications, inspired by Redux.
  • ng2-mobx - MobX connector to Angular 2.

Code Style

Improve readability of the source code

  • codelyzer-cli - Linting for Angular projects.
  • babel-plugin-angular2-annotations - A babel transformer plugin for Angular 2 annotations.
  • 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.

Utilities

Pipes
  • angular-pipes - Useful pipes for Angular.
  • ngx-pipes - Useful pipes for Angular 2 and beyond with no external dependencies.
  • ng-pipes - Bunch of useful pipes for Angular2 (with no external dependencies!).
  • angular2-linky - Linky pipe for angular2.
Meta Tags
  • ng2-meta - Dynamic meta tags and SEO in Angular2.
  • ng2-metadata - Dynamic page title & meta tags generator for Angular2.
Persistence
  • angular2-localstorage - Angular2 decorator to save and restore variables/class properties to HTML5 LocalStorage automatically.
  • ng2-webstorage - Localstorage and sessionstorage manager - angular2 service.
Scroll
  • ng2-page-scroll - Animated scrolling functionality written in pure angular2.
Validation
API

Utilities to consume APIs

Authentication
  • ng2-ui-auth - An angular2 repository for authentication based on angular1's satellizer.
  • angular2-token - Token based authentication service for Angular2 (ng2) with multi-user support. Works best with the devise token auth gem for Rails.
  • angular-oauth2-oidc - Support for OAuth 2 and OpenId Connect (OIDC) in Angular.
  • angular-oauth2 - AngularJS OAuth2.
Responsive Design
  • responsive-directives-angular2 - Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 2.
Event Handling
  • ng-click-outside - Angular 2+ directive for handling click events outside of an element.
i18n

Internationalization / L10n / localization / translation

Pagination
Angular 1 -> Angular 2 Migration
  • ng-metadata - Angular 2 decorators and utils for Angular 1.x.
  • angular2-now - Angular 2 @Component syntax for Angular 1 apps.
Asset management

Utilities for building / bundling / loading assets

Form

Utilities to help create HTML forms

  • angular2-schema-form - Angular2 Schema Form (DISCLAIMER: it is not related to angular-schema-form).
Cookie

Cookie manipulation

  • angular2-cookie - Implementation of Angular 1.x $cookies service to Angular 2.
Clipboard

Copy & paste text to clipboard

Logging
Documentation
  • compodoc - The missing documentation tool for your Angular application.
IoT

Internet of Things

Performance

Reduce amount of time the user has to wait in order to interact with the app

Lazy Load

Integrations

Integrate with services or other frameworks

Dev Tools

Starter Kit

Boilerplate / scaffold / Yeoman generator / stack ensemble / seed

  • @angular/cli - Official CLI tool for Angular.
  • adnotare-psc - 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.
  • test-angular-seed-project - A simple starter Angular2 project.
  • poke-try-harder - Extensible Angular 2 Starter using TypeScript (Updated to 2.4.3).
  • 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.
  • generator-angular2 - A Yeoman Generator to create Angular2 apps right now.
  • generator-ng2-webpack - An opinionated tool for scaffolding an app using angular2 and webpack.
  • generator-modern-web-dev - A Yeoman generator for Modern Web development projects.
  • generator-gulp-angular2 - Yeoman generator for Angular2 + Gulp, base on angular2-seed and generator-gulp-angular.
  • asaf-test - Get started building an Angular library quickly.
  • @manekinekko/angular-library-starter - A Minimalist Starter for Angular (v2+) libraries (w/ AOT support).
  • 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.
  • angular2-universal-starter - Enjoy Server Side rendering and Web Workers in your Angular2 Application.
  • angular-seed - Extensible, reliable and modular starter project for Angular 2 (and beyond) with statically typed build and AoT compilation.

Related Repositories

angular2-education

angular2-education

A list of helpful material to develop using Angular ...

awesome-angular

awesome-angular

:page_facing_up: A curated list of awesome Angular 2 and Angular 4 resources by ...

awesome-angular

awesome-angular

:page_facing_up: A curated list of awesome Angular 2 and Angular 4 resources by ...

awesome-webpack

awesome-webpack

A curated list of awesome Webpack resources, libraries and tools ...

generator-cg-angular

generator-cg-angular

Yeoman generator for Enterprise Angular projects. ...


Top Contributors

brillout devarchy-bot Chyngyz dinony 2muchcoffeecom beeman diegochavez born2net