Skip to content
Projects

brillout/awesome-angular-components

View on GitHub

brillout/awesome-angular-components has 3,184 GitHub stars and 392 forks. GitHot measured 0 stars in 24 hours. Last checked 2026-11-07 18:38 UTC. Last push 2022-01-04.

How these counts are measured

Catalog of Angular 2+ Components & Libraries

Measured star growth

in 24h
0
in 7 days
Collecting history
in 15 days
Collecting history
in 1 month
Collecting history

Net star changes over overlapping periods, not daily totals. Missing measurements are left blank. Stars measure attention, not software quality.

README.md

Original

Angular 2+ Components & Libraries


Contents





UI Components

Overlay

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.
  • 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).
Popover

Show a little dialog next to an element

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.
Loading / Progress Indicators

Let the user know that something is being loaded

Menu

Menu / sidebar

Charts
Map
List Virtualization
Infinite Scroll
Parallax

Parallax effect while scrolling

Scrollbar

Replace the browser scrollbar with a custom one

Carousel

Carousel / touch slider / swiper

Sticky

Implementations similar to position: sticky

  • @ngui/sticky - Angular2 "position: sticky" implementation as a directive.
Context Menu
Time

Display time / date / age

Audio / Video
SVG
  • ng-inline-svg - Angular 2+ directive for inserting an SVG file inline within an element.
Social Sharing
PDF
Miscellaneous

Form

Let the user create & edit data

Date Picker

Time Picker / Datetime Picker

Color Picker
Slider

Let the user choose a value from a given range

Select

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).
Autocomplete

Autosuggest / autocomplete / typeahead

Type Select

Let the user select a tag / something while typing

Drag and Drop
  • ng2-dragula - Simple drag and drop with dragula.
  • ng2-dnd - Angular 2 Drag-and-Drop without dependencies.
  • ng-drag-drop - Angular 4 Drag & Drop based on HTML5 with no external dependencies.
Sortable List

Let the user define an order on a list

Masked Input
Rich Text Editor
File Upload
Autosize Input / Textarea
  • angular2-autosize - Angular2-autosize is an Angular2 directive that automatically adjusts textarea height to fit content.
Calendar

Show & edit events in a calendar view

Image Editing

Image manipulation

UI Layout

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
Responsive

UI Frameworks

Responsive

Set of components + responsive layout system

Component Collections

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.
  • ng-zorro-antd - An enterprise-class UI components based on Ant Design and Angular.

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.

Admin panel

Admin panels / dashboard

  • ngx-admin - Admin template based on Nebular framework (Angular 4+, Bootstrap 4+).

Isomorphic Apps

Server-side rendering

  • angular-ssr - Angular 4+ server-side rendering solution
  • @ng-seed/universal - Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Material Design & Flexbox, Webpack, dev/prod modes, DLLs, AoT compilation, HMR, SCSS compilation, lazy loading, @ngrx/store, config, cache, i18n, SEO, angulartics2 and TSLint/codelyzer.

Code Structure

Improve overall design of the source code

Data Management

Data flow / data store / data flow

Communication with Server

Code Style

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-tslint-rules - Shared TSLint & codelyzer rules to enforce a consistent code style for Angular development.

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.
Form

Utilities to help create HTML forms

Animations
  • ng-animate - 🌙 A collection of cool, reusable and flexible animations for Angular 4.2+
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.
  • @ngx-auth/core - Authentication utility for Angular.
Event Handling
  • ng-click-outside - Angular 2+ directive for handling click events outside of an element.
Scroll
Responsive Design
  • 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.
Persistence
  • 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.
  • @ngx-cache/core - Cache utility for Angular.
Cookie

Cookie manipulation

  • angular2-cookie - Implementation of Angular 1.x $cookies service to Angular 2.
Routing
  • 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.
  • @ngx-i18n-router/core - Route internationalization utility for Angular.
Pagination
Validation
i18n

Internationalization / L10n / localization / translation

Logging
Asset management

Utilities for building / bundling / loading assets

Meta Tags

Set meta tags, , children of <head></em></p> <ul> <li><a href="https://github.com/vinaygopinath/ng2-meta">ng2-meta</a> - Dynamic meta tags and SEO in Angular2.</li> <li><a href="https://github.com/fulls1z3/ngx-meta">@ngx-meta/core</a> - Dynamic page title & meta tags utility for Angular (w/server-side rendering).</li> </ul> <h6>Clipboard</h6> <p><em>Copy & paste text to clipboard</em></p> <ul> <li><a href="https://github.com/maxisam/ngx-clipboard">ngx-clipboard</a> - A wrapper directive for clipboard.js.</li> </ul> <h6>Angular 1 -> Angular 2 Migration</h6> <ul> <li><a href="https://github.com/ngParty/ng-metadata">ng-metadata</a> - Angular 2 decorators and utils for Angular 1.x.</li> <li><a href="https://github.com/pbastowski/angular2-now">angular2-now</a> - Angular 2 @Component syntax for Angular 1 apps.</li> </ul> <h6>Documentation</h6> <ul> <li><a href="https://github.com/compodoc/compodoc">compodoc</a> - The missing documentation tool for your Angular application.</li> </ul> <h6>IoT</h6> <p><em>Internet of Things</em></p> <ul> <li><a href="https://github.com/urish/angular2-iot">angular2-iot</a> - Internet of Things directives for Angular 2 (Led, Button, etc.).</li> <li><a href="https://github.com/manekinekko/angular-web-bluetooth">@manekinekko/angular-web-bluetooth</a> - The missing Web Bluetooth module for Angular (>=2).</li> </ul> <h6>Product Tour</h6> <ul> <li><a href="https://github.com/isaacplmann/ng2-tour">ng2-tour</a> - Product Tour.</li> </ul> <h1>Performance</h1> <p><em>Reduce amount of time the user has to wait in order to interact with the app</em></p> <ul> <li><a href="https://github.com/AngularClass/angular2-idle-preload">@angularclass/idle-preload</a> - Angular 2 Idle Preload for preloading async routes via @AngularClass.</li> </ul> <h6>Lazy Load</h6> <ul> <li><a href="https://github.com/tjoskar/ng2-lazyload-image">ng2-lazyload-image</a> - Lazy image loader for Angular 2.</li> <li><a href="https://github.com/NathanWalker/ng2-image-lazy-load">ng2-image-lazy-load</a> - Angular2 image lazy loader library.</li> </ul> <h1>Integrations</h1> <p><em>Integrate with services or other frameworks</em></p> <ul> <li><a href="https://github.com/angular/angularfire2">angularfire2</a> - The official Angular 2 library for Firebase.</li> <li><a href="https://github.com/auth0/angular2-jwt">ang2-jwt</a> - Helper library for handling JWTs in Angular 2 apps.</li> <li><a href="https://github.com/angular/react-native-renderer">angular2-react-native</a> - Use Angular 2 and React Native to build applications for Android and iOS.</li> <li><a href="https://github.com/Urigo/angular-meteor">angular2-meteor</a> - Angular and Meteor - The perfect stack.</li> <li><a href="https://github.com/angulartics/angulartics2">angulartics2</a> - Vendor-agnostic analytics for Angular2 applications.</li> <li><a href="https://github.com/mean-expert-official/loopback-sdk-builder">perfectedtech-loopback-sdk-builder</a> - Tool for auto-generating Software Development Kits (SDKs) for LoopBack.</li> <li><a href="https://github.com/Alfresco/alfresco-ng2-components">ng2-alfresco-core</a> - Alfresco Angular 2 components.</li> <li><a href="https://github.com/monounity/karma-typescript">karma-typescript</a> - Simplifying running unit tests with coverage for Typescript projects.</li> <li><a href="https://github.com/Urigo/mongo-rxjs-observable">meteor-rxjs</a> - Exposing Mongo Cursor as RxJS Observable.</li> <li><a href="https://github.com/shprink/wp-api-angular">wp-api-angular</a> - Angular (>=2) services for WordPress WP-API(v2) or WP >= 4.7 (natively supports WP-API).</li> <li><a href="https://github.com/selfbits/selfbits-angular2-sdk">selfbits-angular2-sdk</a> - Angular 2 SDK for Selfbits Backend-as-a-Service.</li> <li><a href="https://github.com/MurhafSousli/ng2-wp-api">ng2-wp-api</a> - Angular WordPress Module.</li> <li><a href="https://github.com/Useful-Software-Solutions-Ltd/angular2-disqus">angular2-disqus</a> - A DISQUS integration for Angular2.</li> <li><a href="https://github.com/Cloudtasks/angular2-cloudtasks">angular2-cloudtasks</a> - Helps using Cloudtasks.io image processing task by substituting your images sources with the processing URL.</li> <li><a href="https://github.com/cloudinary/cloudinary_angular">@cloudinary/angular</a> - Cloudinary Angular client library.</li> <li><a href="https://github.com/dethariel/ng2-recaptcha">ng2-recaptcha</a> - Angular 2 component for Google reCAPTCHA.</li> <li><a href="https://github.com/xmaestro/angular2-recaptcha">angular2-recaptcha</a> - Angular 2 : Typescript component for Google reCaptcha.</li> <li><a href="https://github.com/pubnub/pubnub-angular2">pubnub-angular2</a> - Official PubNub Angular2.</li> <li><a href="https://github.com/MurhafSousli/ng2-disqus">ng2-awesome-disqus</a> - Disqus for Angular.</li> <li><a href="https://github.com/tomwayson/angular2-esri-loader">angular2-esri-loader</a> - An Angular 2 service to help you load ArcGIS API for JavaScript Modules.</li> <li><a href="https://github.com/fulls1z3/ngx-universal">@ngx-universal/state-transfer</a> - State transferring utility for Angular Universal.</li> </ul> <h1>Dev Tools</h1> <ul> <li><a href="https://github.com/compodoc/ngd">@compodoc/ngd-cli</a> - View the dependencies tree of you Angular2 application.</li> <li><a href="https://github.com/SoCreate/angular-playground">angular-playground</a> - A drop in app module for working on Angular components in isolation (Angular version 2.x and above).</li> <li><a href="https://github.com/ngrx/store-devtools">@ngrx/store-devtools</a> - Developer Tools for @ngrx/store.</li> <li><a href="https://github.com/matiboy/angular2-prettyjson">angular2-prettyjson</a> - Angular 2 debug output of objects. Contains a pipe similar to JsonPipe but adds support for spacing and handling of circular structures.</li> <li><a href="https://github.com/rangle/augury">Augury</a> - Angular 2 development tools for Chrome.</li> <li><a href="https://github.com/ng-seed/angular-webpack-config">angular-webpack-config</a> - Shared Webpack config for Angular development.</li> </ul> <h1>Starter Kit</h1> <p><em>Boilerplate / scaffold / Yeoman generator / stack ensemble / seed</em></p> <ul> <li><a href="https://github.com/angular/angular-cli">@angular/cli</a> - Official CLI tool for Angular.</li> <li><a href="https://github.com/angular/angular2-seed">test-angular-seed-project</a> - A simple starter Angular2 project.</li> <li><a href="https://github.com/antonybudianto/angular2-starter">poke-try-harder</a> - Extensible Angular 2 Starter using TypeScript (Updated to 2.4.3).</li> <li><a href="https://github.com/ericmdantas/generator-ng-fullstack">generator-ng-fullstack</a> - 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.</li> <li><a href="https://github.com/swirlycheetah/generator-angular2">generator-angular2</a> - A Yeoman Generator to create Angular2 apps right now.</li> <li><a href="https://github.com/cmelion/generator-ng2-webpack">generator-ng2-webpack</a> - An opinionated tool for scaffolding an app using angular2 and webpack.</li> <li><a href="https://github.com/dsebastien/modernWebDevGenerator">generator-modern-web-dev</a> - A Yeoman generator for Modern Web development projects.</li> <li><a href="https://github.com/x6doooo/generator-gulp-angular2">generator-gulp-angular2</a> - Yeoman generator for Angular2 + Gulp, base on angular2-seed and generator-gulp-angular.</li> <li><a href="https://github.com/preboot/angular-library-seed">asaf-test</a> - Get started building an Angular library quickly.</li> <li><a href="https://github.com/manekinekko/angular-library-starter">@manekinekko/angular-library-starter</a> - A Minimalist Starter for Angular (v2+) libraries (w/ AOT support).</li> <li><a href="https://github.com/AngularClass/angular2-webpack-starter">angular2-webpack-starter</a> - 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.</li> <li><a href="https://github.com/alexpods/angular2-universal-starter">angular2-universal-starter</a> - Enjoy Server Side rendering and Web Workers in your Angular2 Application.</li> <li><a href="https://github.com/mgechev/angular-seed">angular-seed</a> - Extensible, reliable and modular starter project for Angular 2 (and beyond) with statically typed build and AoT compilation.</li> <li><a href="https://github.com/vmware/clarity-seed">clarity-seed</a> - This is a repository for a seed project that includes Clarity Design System's dependencies.</li> <li><a href="https://github.com/preboot/angular2-webpack">Angular 2 Webpack</a> - A complete, yet simple, starter for Angular 2 using webpack</li> <li><a href="https://github.com/colmena/colmena-cms">Colmena CMS</a> - Free and Open Source API and Admin powered by LoopBack and Angular.</li> <li><a href="https://github.com/ng-seed/universal">@ng-seed/universal</a> - Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Material Design & Flexbox, Webpack, dev/prod modes, DLLs, AoT compilation, HMR, SCSS compilation, lazy loading, @ngrx/store, config, cache, i18n, SEO, angulartics2 and TSLint/codelyzer.</li> </ul>

Explore related projects