Skip to content

Latest commit

 

History

History
419 lines (352 loc) · 31.9 KB

README.md

File metadata and controls

419 lines (352 loc) · 31.9 KB
Raw

Awsome Angular 2+ list

A curated list of amazingly Angular 2+ components, libraries, resources and shiny things.



Angular

Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.

Current Angular version

Angular badge

Current Browser support for Angular
Browser Support versions
Chrome latest
Firefox latest
Edge 2 most recent major versions
Safari 2 most recent major versions
iOS 2 most recent major versions
Android 2 most recent major versions

Browser support

Official Resources


Table of Contents



Documentation generators

  • compodoc - The missing documentation tool for your Angular application.
  • AngularDoc - Architectural analysis and visualization for Angular 2 projects.
  • Storybook - Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.


Boilerplates / Seeds

  • Angular CLI - CLI tool for Angular.
  • ngx-rocket - Angular 9+ starter kit for enterprise-grade projects.
  • ng2-play - A minimal Angular2 playground using TypeScript and SystemJS loader.
  • ng2-lab - Angular Lab.
  • babel-angular2-app - A super-simple skeleton Angular 2 app built with Babel and Browserify.
  • angular-starter - An Angular Starter kit featuring Angular (Router, Http, Forms, Services, Tests, E2E, Dev/Prod, HMR, Async/Lazy Routes, AoT via ngc), Karma, Protractor, Jasmine, Istanbul, TypeScript, TsLint, Codelyzer, Hot Module Replacement, @types, and Webpack by @tipeio.
  • learn-angular - Learn Angular 4 in Baby Steps.
  • angular-seed - Extensible, reliable, modular, PWA ready starter project for Angular (2 and beyond) with statically typed build and AoT compilation.
  • angular2-minimalist-starter - Angular2 Minimalist Starter.
  • angular-starter - Gulp Angular Starter using TypeScript (Updated to 4.4.3).
  • angular2-boilerplate - An Angular 2+ boilerplate on steroids that achieves 100 top score on Google Page Speed.
  • angular2-seed - A simple starter project demonstrating the basic concepts of Angular 2.
  • @ng-seed/universal - A seed project for Angular Universal apps following the common patterns and best practices in file and application organization.


Material / CDK



UI Layout

Structure

  • @angular/flex-layout - Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API.
  • angular2-grid - A grid-based drag/drop/resize directive plugin for Angular 2.
  • angular-split - Angular (2+) UI library to split views.
  • ng2-fullpage - Angular 2 fullpage scrolling.
  • ngresizable - Simple, tree-shakable, AoT, Universal and Web Worker friendly resizable component for Angular
  • ng-golden-layout - Angular bindings for golden-layout ; A multi window layout manager for webapps.
  • ng6-golden-layout - Golden-Layout binding for Angular 6
  • ngx-masonry - Angular Module for displaying a feed of items in a masonry layout.

Icons

Emoji



UI Frameworks

Responsive

  • ng2-bootstrap - Native Angular directives for Bootstrap.
  • @ng-bootstrap/ng-bootstrap - Angular powered Bootstrap.
  • ng-semantic - Angular 2 building blocks package based on Semantic UI.
  • ng2-semantic-ui - Semantic UI Angular 2 Integrations -- no JQuery required --.
  • angular2-materialize - Angular 2 support for Materialize CSS framework.
  • clarity-angular - Clarity Design System: UX guidelines, HTML/CSS framework, and Angular 2 components working together to craft exceptional experiences.
  • @covalent/core - Teradata UI Platform built on Angular-Material 2.0.
  • @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 for Angular is a dependency-free Angular toolkit for building modern web apps.
  • 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.
  • 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.
  • jQWidgets - Vue, Angular, React, jQuery and ASP .NET Core UI Framework
  • Angular MetaMagic EXtensions - Acronym for Angular MetaMagic EXtensions for Inputs & Outputs. It is a rich set of Angular 6 (120+) components powered by HTML5 & CSS3 for Responsive Design and with 50+ Material Design Themes, UI Components, Charts, Gauges, Data Point Widgets, Dashboads.
  • src-zone/material - Blox Material makes it possible to create beautiful Angular apps with modular and customizable UI components, designed according to the Material Design Guidelines.
  • ng-sq-ui - Flexible and easily customizable UI-kit for Angular 6+
  • truly-ui - Truly-UI - WebComponents for Desktop Applications.
  • 💰 kendo-ui - Kendo UI for Angular. Professional Grade Angular UI Components.
  • 💰 syncfusion-angular-ui - The Complete Angular UI Components Library.
  • 💰 wijmo-core - Deliver next-generation HTML5 applications with Wijmo Core, a collection of true JavaScript controls written in TypeScript and built for speed.
  • Taiga UI - Taiga UI is fully-treeshakable Angular UI Kit consisting of multiple base libraries and several add-ons.
  • Mosaic UI - Mosaic UI Components for Angular.
  • Flowbite - Open-source UI components built with Tailwind CSS with support for Angular.

Mobile

  • ionic-framework - A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
  • 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.
  • ng-zorro-antd-mobile - A configurable Mobile UI components based on Ant Design Mobile and Angular.

Admin panels

  • coreui - CoreUI Angular is free Angular 2+ admin template based on Bootstrap 4.
  • ngx-admin - Admin template based on Nebular framework (Angular 4+, Bootstrap 4+).
  • Material Dashboard Angular 4 - Material Dashboard Angular is a free Material Bootstrap Admin.
  • ng-pi-admin - Angular admin.
  • ng-dashboard - Angular admin dashboard framework.
  • cdk-admin - Angular 6 admin panel using angular material & angular flex.
  • PaperAdmin - A flat admin dashboard using Angular 2/4.
  • Reboard - Admin dashboard template based on Angular 4+, Angular Material 2 and ngx-charts.
  • ng-matero - Ng-Matero is an Angular admin template made with Material components.


UI Components

Overlay

Overlay / modal / popup

Lightbox
Tooltip
  • ng2-tooltip-directive - Tooltip for Angular
  • ng2-ui-tooltip - Angular2 Tooltip Directive
  • ngx-tooltip - Simple tooltip control for your angular2 applications using bootstrap3. Does not depend of jquery.
  • ngx-popper - An angular wrapper for popper.js, great for tooltips and positioning popping elements
Breadcrumb
  • xng-breadcrumb - A lightweight, configurable and reactive breadcrumbs solution for Angular 2+
Popover
  • angular-confirmation-popover - Displays a bootstrap confirmation popover (with no jQuery or bootstrap JS!).
  • ngx-popover - Simple popover control for your angular2 applications using bootstrap3. Does not depend of jquery.
  • popover - Angular Material Popover
Notification

Toaster / snackbar / alert

  • ng-snotify - Angular 2+ Notification Center.
  • angular2-notifications - A light and easy to use notifications library for Angular 2.
  • ng2-notifications - Angular 2 Component for Native Push Notifications.
  • @ngrx/notify - Web Notifications Powered by RxJS for Angular.
  • angular-notifier - A well designed, fully animated, highly customizable, and easy-to-use notification library for your Angular 2+ application.
  • ng-notyf - A dead simple notification library for Angular.
  • ng-push - An Angular wrapper around the Notifications API.
  • ng2-notify-popup - A simple, lightweight module for displaying notifications in your Angular 4 app.
  • 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.
  • ngx-toastr - Angular 2 toastr.
  • ng2-toastr - Bootstrap style toast for modern Angular.
  • ngx-sweetalert2 - Declarative, template-driven SweetAlert2 integration for Angular 4+
  • ng-alerts - An alert library for Angular.
Table

Table / Data Grid

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.
  • ngx-treeview - An Angular treeview component with checkbox
  • ng.tree - Ng Tree for angular4
Loading / Progress Indicators
Menu

Menu / sidebar / drawer

ContextMenu
Charts
Markdown / Editors

Markdown / Showdown / Editor / WYSIWYG

  • ngx-md - Angular(ngx) directive for parsing markdown content in your web application.
  • ngx-markdown - Angular markdown component/directive/pipe/service to parse static, dynamic or remote content to html with syntax highlight.
  • ng2-markdown - Angular2 Markdown Web Component.
  • ngx-showdown - Angular X Showdown Module.
  • ng2-simplemde - angular2 component for Simplemde Markdown Editor.
  • covalent-text-editor - Covalent text and markdown editor component for Angular based on SimpleMDE.
  • ng2-ace - A basic ace editor directive for angular 2.
  • ngx-inline-editor - Native UI Inline-editor Angular (4.0+) component.
  • ngx-quill - quill editor with angular and TS.
  • ngx-quill-editor - @quilljs editor component for @angular.
  • ngx-monaco-editor - Monaco Editor component for Angular 2 and Above.
  • covalent-code-editor - Covalent text and code editor component for Angular based on Monaco Editor.
  • ngx-wig - Angular(Angular 5, Angular 6) WYSIWYG HTML Rich Text Editor.
  • angular2-tinymce - Angular 2 component for TinyMCE MCE WYSIWYG editor.
  • angular-simditor - Angular Editor for Simditor.
Map
  • angular2-google-maps - Angular 2+ Google Maps Components.
  • ng2-map - Angular2 Google Maps Directives.
  • angular-maps - Angular Maps (X-Map) is a set of components and services to provide map functionality in angular 2+ apps.
  • ng-ui-map - Angular Google Maps Directives.
  • angular2-esri4-components - A set of Angular 2 components to work with ArcGIS API for JavaScript v4.1.
  • angular-esri-map - A collection of directives to help you use Esri maps and services in your Angular applications.
  • angular-cesium - JavaScript library for creating map based web apps using Cesium and Angular.
  • angular2-baidu-map - Angular2 component for Baidu map.
  • angular2-mapbox - Angular 2 components for mapbox-gl.
  • ngx-mapbox-gl - Angular binding of mapbox-gl-js.
  • ngx-mapboxgl-starter - A recipe of Angular and MapboxGL.
  • ngx-amap - Angular 2+ component for AMap (Gaode map) .
  • mangol - Maps created with Angular & OpenLayers using Material design.
Audio / Video
  • videogular2 - The HTML5 video player for Angular 2.
  • audioScope-ng2 - AudioScope demo written in Angular 2 + TypeScript.
  • angular-audio-context - An Angular wrapper for the Web Audio API's AudioContext.
  • tone-lab - Playing around with Web Audio and Angular 4.
  • ngx-embed-video - Get embed code for embedding youtube/vimeo/dailymotion/* video in websites from URL or ID in Angular 4.
  • echoes-player - Echoes Player: the missing Media Player experience for Youtube - Built with Angular.
  • ngx-youtube-player - (ngx) A youtube component wrapped with Angular (typescript).
  • web - Angular6 music player to search and play YouTube, SoundCloud and Mixcloud tracks .
  • alltomp3-app - Desktop application to download YouTube, SoundCloud & Spotify in MP3 with full tags.
  • ngx-audio-player - A library for loading playing audio using HTML 5 audio specifically for Angular 7.
  • ngx-plyr - Angular 6+ binding for Plyr video & audio player.
SVG
  • ng-inline-svg - Angular 2+ directive for inserting an SVG file inline within an element.
  • angular-svg-icon - Angular 6+ component for inlining SVGs allowing them to be easily styled with CSS.
  • shapeshifter - SVG icon animation tool for Android, iOS, and the web.
Virtual scroll
Infinite scroll
Scrollbar
  • ngx-perfect-scrollbar - Angular wrapper library for the Perfect Scrollbar.
  • ngx-malihu-scrollbar - Angular 2+ scrollbar customization using Malihu jQuery Custom Scrollbar plugin.
  • ngx-scrollbar - Custom overlay-scrollbars with native scrolling mechanism for Angular, it also provides a cross-browser smooth scroll directive.
Drag and Drop
  • ng2-dragula - Simple drag and drop with dragula.
  • ng2-dnd - Angular 2 Drag-and-Drop without dependencies.
  • ng-drag-drop - Drag & Drop for Angular - based on HTML5 with no external dependencies.
  • ngx-sortablejs - Angular 2+ binding to SortableJS. Previously known as angular-sortablejs.
Counters / Countdown
  • ngx-countdown - Simple, easy and performant countdown for angular.

Utilities

Pipes
  • angular-pipes - Useful pipes for Angular.
  • ngx-pipes - Useful pipes for Angular with no external dependencies!
  • ng-pipes - Bunch of useful pipes for Angular2 (with no external dependencies!).
File upload
Authentication / Authorization

Other Libraries

  • ng-google-sheets-db - 🚀 Use Google Sheets as your (read-only) backend!
  • ngx-flag-picker - 😻 Customizable component which containing a dropdown with country flags
  • ng-lock - Angular decorator for locking functions / user interface while task are running