
Angular 2+ Components & Libraries
Overlay / modal / alert / dialog / lightbox / popup
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.
- ngx-toastr - 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.
- angular-notifier - A well designed, fully animated, highly customizable, and easy-to-use notification library for your Angular 2+ application.
- ng2-toastr - Bootstrap style toast for modern angular (v2.0.0 and above).
Show a little dialog next to an element
Table / Data Grid — Display (large) datasets
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.
Loading / Progress Indicators
Let the user know that something is being loaded
Menu / sidebar
Parallax effect while scrolling
Replace the browser scrollbar with a custom one
Carousel / touch slider / swiper
Implementations similar to position: sticky
- @ngui/sticky - Angular2 "position: sticky" implementation as a directive.
Display time / date / age
- ng-inline-svg - Angular 2+ directive for inserting an SVG file inline within an element.
Let the user create & edit data
Time Picker / Datetime Picker
Let the user choose a value from a given range
Let the user choose from a list of options
- ng2-select - Angular2 based replacement for select boxes.
- angular2-select - A native angular 2 select component (based on select2).
Autosuggest / autocomplete / typeahead
Let the user select a tag / something while typing
- ng2-dragula - Simple drag and drop with dragula.
- ng2-dnd - Angular 2 Drag-and-Drop without dependencies.
- ng2-drag-drop - Angular 2 Drag & Drop based on HTML5 with no external dependencies.
Let the user define an order on a list
Autosize Input / Textarea
- angular2-autosize - Angular2-autosize is an Angular2 directive that automatically adjusts textarea height to fit content.
Show & edit events in a calendar view
Image manipulation
Layout the overall / main view
- angular2-grid - A grid-based drag/drop/resize directive plugin for Angular 2.
- ng2-fullpage - Angular 2 fullpage scrolling.
- angular-split - Angular (2+) UI library to split views.
- ngresizable - Simple, tree-shakable, AoT, Universal and Web Worker friendly resizable component for Angular
Set of components + responsive layout system
Set of components without layout system
- @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 - 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.
- 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.
Admin panels / dashboard
- ng2-admin - Angular 2 admin dashboard framework.
Server-side rendering
- angular-ssr - Angular 4+ server-side rendering solution
Improve overall design of the source code
Data flow / data store / data flow
Communication with Server
Improve readability of the source code
- codelyzer - 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.
- 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.
Utilities to help create HTML forms
Utilities to consume APIs
- 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.
- ng-click-outside - Angular 2+ directive for handling click events outside of an element.
- 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.
- angular2-localstorage - Angular2 decorator to save and restore variables/class properties to HTML5 LocalStorage automatically.
- ng2-webstorage - Localstorage and sessionstorage manager - angular2 service.
- angular-safeguard - Wrapper around cookies/sessionStorage/localStorage for angular2. If all are unavailable will use an in memory storage.
Cookie manipulation
- angular2-cookie - Implementation of Angular 1.x $cookies service to Angular 2.
- 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.
- ng2-page-transition - Simple Angular2 component to create a page transition animation on route changes.
Internationalization / L10n / localization / translation
- @ngx-translate/core - The internationalization (i18n) library for Angular 2+.
- angular-l10n - An Angular 2 library to translate messages, dates and numbers.
Utilities for building / bundling / loading assets
Set meta tags, <title>, children of
- ng2-meta - Dynamic meta tags and SEO in Angular2.
- ng2-metadata - Dynamic page title & meta tags generator for Angular2.
Copy & paste text to clipboard
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.
- compodoc - The missing documentation tool for your Angular application.
Internet of Things
Reduce amount of time the user has to wait in order to interact with the app
Integrate with services or other frameworks
- @compodoc/ngd-cli - View the dependencies tree of you Angular2 application.
- angular-playground - A drop in app module for working on Angular components in isolation (Angular version 2.x and above).
- @ngrx/store-devtools - Developer Tools for @ngrx/store.
- angular2-prettyjson - Angular 2 debug output of objects. Contains a pipe similar to JsonPipe but adds support for spacing and handling of circular structures.
- Augury - Angular 2 development tools for Chrome.
Boilerplate / scaffold / Yeoman generator / stack ensemble / seed
- @angular/cli - Official CLI tool for Angular.
- 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.
- clarity-seed - This is a repository for a seed project that includes Clarity Design System's dependencies.
- Angular 2 Webpack - A complete, yet simple, starter for Angular 2 using webpack
- Colmena CMS - Free and Open Source API and Admin powered by LoopBack and Angular.