An open API service indexing awesome lists of open source software.

awesome-angular

:page_facing_up: A curated list of awesome Angular resources
https://github.com/PatrickJS/awesome-angular

Last synced: 6 days ago
JSON representation

  • Third Party Components

    • CSV

      • impler - Use the [Angular package](https://www.npmjs.com/package/@impler/angular) to embed the CSV Excel Importer into your app.
    • Data Grids

      • ag-grid - The best JavaScript Data Table for building Enterprise Applications. Supports React, Angular, Vue and Plain JavaScript.
      • ignite-ui-angular's grid - The data grid, tree grid, hierarchical grid in `Ignite UI` provide excel-style filtering, live-data, sorting, draggable row and other toolbar.
      • active-table - Framework agnostic table component for editable data experience.
      • jsgrids - A comparison tool to compare JavaScript data grid and spreadsheet libraries. Find even more libraries from this repo.
      • ngx-flamegraph - Flame graph for stack trace visualization written in Angular.
      • revogrid - Powerful virtual data grid smartsheet with advanced customization. Best features from Excel plus incredible performance.
      • ZingGrid - [ZingGrid](https://github.com/ZingGrid/zinggrid) is a JavaScript Web Component Library that allows developers to include interactive data tables in their web applications. The library can also be used in popular frameworks such as React, Angular, Vue, jQuery, and many more!
      • ngx-panemu-table - An Angular table component. It is designed to be easy to use. Most work will be in TypeScript file, while the HTML file only needs to have a very simple `panemu-table` tag.
      • @blueshiftone/ngx-grid - A professional Angular data grid.
      • @guiexpert/angular-table - Framework-agnostic table library designed to seamlessly integrate with the major frameworks, including [Angular](https://gui.expert/getstarted/angular/).
      • ngx-tabulator-tables - Angular wrapper for the [Tabulator](https://tabulator.info/) table library.
      • activereportsjs/angular-reporting-tool - Angular components for data visualization and reporting. Embed reports with [ActiveReportsJS](https://developer.mescius.com/activereportsjs).
      • Jspreadsheet CE - Open source JavaScript spreadsheet and data grid component, can be used in Angular apps when wrapped or consumed via Angular elements.
      • ngx-s-data-table - An Angular data table module that auto-maps class data with optional custom mappings for flexible rendering.
      • mat-datatable - A simple data table with virtual scrolling using Angular Material.
      • @Trixwell/data-grid - An Angular data table component with filtering, sorting, pagination, CSV export, sub-grids, and Material integration.
      • ngx-multi-sort-table - This library features a multiple sortable table based on Angular Material Design, with a focus on server-side loaded and sorted data.
      • angular2-smart-table - Angular Smart Data Table component.
      • slickgrid-universal - A monorepo which includes all editors, filters, extensions, and services related to framework agnostic [SlickGrid](https://github.com/6pac/SlickGrid) usage.
      • ngx-editable-material-table - An editable table, built on top of Angular Material, natively for Angular.
      • ngx-smartgrid - A lightweight and flexible Angular table/grid component designed to work seamlessly across Angular 10 to 20+.
      • handsontable - A popular JavaScript data grid component that brings the well-known look and feel of spreadsheets to your application.
      • ng-virtual-grid - Maximum performance for extremely large grids.
      • ngx-simple-datatables - A lightweight, high-performance Angular data table component with features like virtual scrolling, column freezing, and customizable templates.
      • ngx-list-manager - An Angular service tool to manage lists efficiently.
      • ZingGrid - A JavaScript Web Component Library that allows developers to include interactive data tables in their web applications. The library can be used in [Angular](https://www.zinggrid.com/docs/integrations/js-frameworks-&-libs/angular) and many more frameworks.
      • cerious-grid - A seriously powerful Angular grid for developers who demand control, flexibility, and performance.
      • ngxsmk-datatable - Modern Angular 17+ datatable focused on performance, customization, and developer experience.
      • ngx-column-filter - A powerful, reusable Angular column filter component with support for multiple field types, advanced filtering rules, and customizable match modes.
      • TabularJS - Lightweight JavaScript table and data grid library for advanced table features in Angular.
      • uni-table - Angular data grid built on signals for zero‑lag performance, combining advanced server‑side features with a streamlined configuration API.
      • ogrid - The lightweight, multi-framework data grid with enterprise features and zero enterprise cost.
      • @witqq/spreadsheet - Canvas‑based spreadsheet/datagrid engine with zero dependencies, 100K+ rows at 60fps, full editing, and real‑time collaboration. Check their [website](https://spreadsheet.witqq.dev/).
      • angular-datatables.net - Angular plus [DataTables](https://datatables.net/).
      • uiGrid - Open‑source, multi‑platform data grid rebuilt from the original [ui‑grid](https://github.com/angular-ui/ui-grid) with the same API and modern Angular signals, supporting Angular, Web Components, React, and Rust.
      • ngx-datawindow - Table component modernizing the classic DataWindow with zero‑config CRUD, computed columns, multi‑buffer state, offline sync, and granular change tracking.
      • simple-table - Framework-agnostic data grid and table component for building modern, scalable applications.
      • toolbox - High-performance, framework-agnostic web components for data-intensive applications.
      • gp-grid - Data grid library built with a modular architecture that cleanly separates core logic from framework integrations to efficiently handle massive datasets with millions of rows.
      • ngx-powerful-tree - A virtualized tree with HTML5 drag‑and‑drop, fast search, locked subtrees, and file‑picker modes, built on `@angular/cdk/scrolling` for smooth performance at 100k+ rows.
      • agrid - Angular data grid with spreadsheet-like editing, virtual scrolling, filtering, sorting, grouping, clipboard workflows, row operations, pagination, and custom cell renderers.
      • ngx-datatables-net - Angular wrapper for `DataTables.net` supporting Angular 20+.
      • sheetjs - A JavaScript library for reading and writing data from spreadsheets.
      • angular-advanced-table - Angular monorepo featuring `ng-advanced-table`—a signals-first, accessible data table library—and its documentation site.
      • angular-tree - A high-performance, headless tree component that is zoneless, signal-powered, and fully virtualized, with `@angular/cdk` as its sole runtime dependency.
    • Dates

      • ngx-date-fns - [Date-fns](https://date-fns.org/) pipes for Angular.
      • ngx-mat-timepicker - A true material timepicker.
      • ngx-datetime-range-picker - Angular material datetime range picker with daily, weekly, monthly, quarterly & yearly levels.
      • mat-datetimepicker - Material datetimepicker for `@angular/material`.
      • angular-datepicker - Highly configurable date picker built for Angular applications.
      • ngx-multiple-dates - Multiple dates picker based on Angular Material.
      • ng-datetime - Angular library containing components used for handling datetime.
      • time2blocks-ngx - Angular lib to identify which time is associated with a Blockchain block in the past (and format it).
      • @dhutaryan/ngx-mat-timepicker - Material timepicker based on material design.
      • ngx-timeline - A simple component library to add an animated timeline view.
      • ngx-prayertimes-api - An Angular API client for [Prayer Times API](https://aladhan.com/prayer-times-api).
      • frxjs-Ngx-Timeline - This library allows you to integrate a timeline in your Angular app.
      • ngx-daterangepicker-pro - A powerful, customizable Angular date range picker built with Angular 17+ and [Day.js](https://github.com/iamkun/dayjs).
      • ngx-custom-daterangepicker - An Angular Material date range picker with configurable options, supporting advanced features and straightforward integration.
      • angular-material-jalali-datepicker-adapter - A comprehensive Angular library that provides Jalali (Persian/Solar Hijri/Shamsi) date adapter for Angular Material datepicker component.
      • date-interceptors - This library provides a robust solution for converting date and duration strings from JSON payloads into native Date objects and Duration objects, respectively.
      • @asadi/angular-date-components - A comprehensive Angular library of date-related components designed to meet the needs of applications that require localization based on various calendar systems.
      • ngx-vertical-timeline - An Angular component for creating a responsive vertical timeline.
      • ngx-timeago - Dynamic timestamp rendering in Angular.
      • ngx-chronica - A comprehensive Angular library providing six specialized date and time picker components that fill critical gaps in the Angular ecosystem.
      • ngx-mat-multi-date-picker - A comprehensive, standalone Angular library providing high-quality Gregorian, Jalali (Persian), and Hijri (Islamic) date pickers.
      • date-time-picker - Angular date time picker.
      • date-time-picker-moment-adapter - Moment.js Adapter for `@danielmoncada/date-time-picker`.
      • hijri-date-time-picker - Angular standalone dual Gregorian/Hijri datetime picker using Umm Al-Qura calendar.
      • ng-laydate - A simple yet robust date & time picker for Angular 18+.
      • lifecycle-timeline - An interactive Vanilla JS component for visualizing product lifecycle stages, accompanied by an Angular integration guide.
      • weekly-availability-picker - A standalone Angular weekly availability picker with drag & resize support.
      • angular-material-jalali-datepicker-adapter - A comprehensive Angular library that provides Jalali (Persian/Solar Hijri/Shamsi) date adapter for Angular Material datepicker component.
      • ng-date-hour-range-selector - A flexible Angular date / date-time range selector built on Angular CDK Overlay.
    • Directives

      • ng-let - Structural directive for sharing data as local variable into HTML component template.
      • ng-for-track-by-property - Angular global `trackBy` property directive with strict type checking.
      • ngx-copypaste - A pure and awesome copy paste directive for Angular.
      • ngx-nullish - Angular Structural Directive, which replaces `*ngIf` with Nullish Coalescing operator.
      • ngx-nullable - This library provides a way to make properties nullable in Angular templates.
      • ngx-if-platform - Directive for conditional display based on platform.
      • ngx-cut - Angular directive for cutting texts with responsive options.
      • ngx-app-version - Angular directive for writing version into DOM.
      • ngx-repeat - Angular directive for repeating HTML element by count.
      • ngx-fixed-footer - Angular directive that adds a fixed footer without overlap.
      • ngx-responsive-if - An Angular structural directive for conditional rendering based on media queries.
      • ngx-copy-to-clipboard - An Angular directive that enables easy text copying to the clipboard with a single click. It supports customizable success/error messages and triggers events on copy actions.
      • ng-click-outside - Angular directive for handling click events outside of an element.
      • ngx-autofocus - A powerful, flexible Angular directive for automatic element focusing.
      • ngxture - A lightweight and modular Angular library that provides ready-to-use animations and gesture directives.
      • @maxime1jacquet/npm-directives - Angular Directives including [ngx-cursor](https://www.npmjs.com/package/ngx-cursor) and [ngx-simple-countdown](https://www.npmjs.com/package/ngx-simple-countdown).
      • ngx-overflow-reveal - An Angular directive that elegantly reveals truncated text on hover.
      • ngxsmk-button-spinner - Angular 17+ directive to show a loading spinner inline or centered on any button.
      • ngx-clamp - Angular directive for multi-line or height-based text clamping with legacy-browser support.
      • ngx-memoize - A lightweight, zero‑dependency decorator that memoizes Angular class methods to eliminate repeated template-call overhead and boost performance.
      • ngx-speech-button - An Angular directive that provides an easy-to-use wrapper for the Web Speech API, enabling voice input functionality with minimal setup.
      • ngx-mat-menu-hover - This Angular directive provides functionality to handle hover menu behavior, allowing menus to open when hovered over and close when the mouse leaves.
      • ngx-highlight - Angular directives for highlighting search matches in text, built on the [CSS Custom Highlight API](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API).
    • DOM

      • ng-lock - Angular decorator to lock a function and user interface while a task is running.
      • ngx-highlightjs - Instant code highlighting, auto-detect language, super easy to use!
      • ngx-resize-observer - Angular 8+ module for detecting when elements are resized.
      • ngx-mutation-observer - Get Angular 8+ events fired when an element is mutated in the DOM.
      • ngx-visibility - Angular module that detects when elements are visible. Uses IntersectionObserver.
      • ngx-breakpoint-observer - This library adds reactive breakpoint and media query methods based on Signals.
      • ngx-sharebuttons - Angular share buttons.
      • ng-helpers - A collection of useful components, directives and pipes for Angular.
      • angular-paginator - Pagination Component for Angular applications.
      • ngx-ellipsis - Multiline text with ellipsis for Angular 9+.
      • ngx-fade - An Angular component for smooth fade-and-slide viewport transitions using the Intersection Observer API.
      • ngx-interpolation - An Angular lightweight library to interprate string interpolation expressions.
      • ng-gd - An easy way to manage a canvas element with support for mouse or tablet events.
      • ngx-annotate-text - An Angular library for visualizing and annotating text, ideal for tasks like named entity recognition and part of speech tagging.
      • ng-dynamic-component - Dynamic components with full life-cycle support for inputs and outputs for Angular.
      • pyno-date - A lightweight Angular library for converting and formatting Jalali and Gregorian dates.
      • ngx-fittext - An Angular library that allows you fit text in a box or a line.
      • ngx-optimus - An Angular library offering custom pipes to simplify data formatting and keep component logic cleaner.
      • ngx-signal-combinators - Composable boolean helpers for Angular signals, enabling cleaner reactive template logic.
      • viewport-truth - A tiny VisualViewport‑first store for accurate CSS‑pixel viewport size that detects virtual keyboards, reduces resize/scroll jitter, and works with SSR across frameworks.
      • angular-inport - Angular In-Viewport Detector.
      • ng-lock - Angular decorator to lock a function and user interface while a task is running.
    • Drag and Drop

      • angular cdk - The `@angular/cdk/drag-drop` module provides you with a way to easily and declaratively create drag-and-drop interfaces.
      • ngx-drag-drop - Angular directives using the native HTML Drag And Drop API.
      • @hackingharold/ngx-dropzone - The missing file input component for Angular Material.
      • ng-dnd - Drag and Drop for Angular.
      • ngx-file-drag-drop - Angular material file input component which lets the user drag and drop files, or select files with the native file picker.
      • angular-drag-drop-layout - A lightweight, dependency-free Angular library for creating highly customizable, responsive grid layouts with drag-and-drop functionality.
      • ngx-swapy - A simple component library to get a drag and drop DOM through the help of [Swapy](https://github.com/TahaSh/swapy).
      • ngx-draggable-dom - Angular attribute directive that causes any element to become a draggable element.
      • ngx-drag-resize - This Angular library provides directives that add drag and resize functionality to HTML elements.
      • ng-keyboard-sort - Library to add keyboard commands for elements that also use CDK drag and drop sorting.
      • ngx-draggable-widget-kama - Reworked [ngx-draggable-widget](https://github.com/arup-banerjee/ngx-draggable-widget) for better support.
      • angular-mixed-cdk-drag-drop - Angular Directive to support mixed orientation drag drop using Angular CDK.
      • cdk-drag-snap-to-point - A demo to showcase cdkDrag features to achieve drop only on certain points.
      • @MasterATM/ngx-dropzone - A lightweight and highly customizable Angular dropzone component for file uploads. Based on [@peterfreeman/ngx-dropzone](https://github.com/peterfreeman/ngx-dropzone) repository.
      • ngx-puzzle - Drag-and-drop dashboard builder for Angular applications.
      • ngx-drag-drop-kit - High-performance Angular drag & drop toolkit featuring grid layouts, sorting, resizing, nesting, and more.
      • ngx-dashboard - Modern Angular workspace for building drag-and-drop grid dashboards with resizable cells and customizable widgets.
      • ngx-dropzone-next - A maintained fork of `@peterfreeman/ngx-dropzone`, providing bug fixes and compatibility with newer Angular versions.
      • Official Angular Docs
    • Editor Components

    • Editors

      • @acrodata/code-editor - CodeMirror 6 wrapper for Angular.
      • angular2-froala-wysiwyg - Angular wrapper for Froala WYSIWYG HTML Editor.
      • ngx-simple-text-editor - Ngx Simple Text editor or ST editor is a simple native text editor component for Angular 9+.
      • ngx-quill - Angular components for the Quill Rich Text Editor.
      • @sibiraj-s/ngx-editor - Rich Text Editor for Angular using ProseMirror.
      • ngx-wig - Angular WYSIWYG HTML Rich Text Editor.
      • ngx-property-editor - Angular library containing simple input components and a property editor component, which automatically builds a form for editing all properties of any object.
      • ngx-tiptap - Angular bindings for [tiptap v2](https://tiptap.dev/).
      • tinymce-angular - Official [TinyMCE](https://www.tiny.cloud/) Angular Component.
      • slate-angular - Angular view layer for [Slate](https://github.com/ianstormtaylor/slate).
      • ngx-ace-wrapper - Angular wrapper library for [Ace](http://ace.c9.io/).
      • ngx-quill-wrapper - Angular wrapper library for [Quill](http://quilljs.com/).
      • ngx-tinymce - `TinyMCE` components built with Angular.
      • formly-editor - A configurable editor for `ngx-formly` forms.
      • MagnetarQuill - Extensible Angular WYSIWYG editor for rich text, media, and tables with a plugin architecture.
      • ngx-editorjs2 - Extensible block editor inspired by [Editor.js](https://editorjs.io/), with customizable blocks and Angular reactive features. [ngx-editor-js2-blocks](https://github.com/Ba5ik7/ngx-editor-js2-blocks) adds support for custom content types.
      • ngx-traak - A WYSIWYG Angular editor library built on top of ProseMirror, built for standalone components and highly customizable with plugins.
      • ngx-summernote - [Summernote](https://github.com/summernote/summernote) editor for Angular.
      • angular-rich-text-editor - Angular wrapper for [RichTextEditor](https://richtexteditor.com/) with license key support and `ControlValueAccessor`.
      • ngx-aztreya-editor - A lightweight, customizable Angular Rich Text Editor component with built-in toolbar, headings, text formatting, and alignment options.
      • Angular-JSON-Tree-Editor-Component - Angular JSON Tree Editor Component that actually works.
      • armor-editor - A secure, lightweight rich text editor with premium features—built to integrate seamlessly into Angular applications.
      • ngx-workflow - A powerful, highly customizable Angular library for building interactive node-based editors, flow charts, and diagrams.
      • contentful-rich-text-angular-renderer - Angular renderer for Contentful Rich Text, offering customizable node and mark rendering using Angular templates.
      • Monaco Pattern Editor - A premium Angular library that wraps Monaco Editor with beautiful themes and coding interview preparation features.
      • ngx-jodit - Angular wrapper for [Jodit](https://github.com/xdan/jodit) WYSIWYG editor.
      • BlockNoteAngular - Unofficial [BlockNote](https://github.com/TypeCellOS/BlockNote) Angular wrapper.
      • angular-editor - A simple native WYSIWYG editor component for Angular.
      • domternal - Lightweight, extensible rich text editor toolkit with native Angular components (Signals, OnPush, standalone), built-in toolbar and theme, and full table support.
      • ngx-json-editor - A minimal, themeable JSON editor for Angular.
      • ngx-ace-signal - A modern Angular signals-based wrapper for the Ace editor.
      • ngx-rwriter - A modern Rich Text Editor component for Angular 21+ with native support for images, alignment, lists, color pickers, and translations.
      • ngx-pro-editor - A feature-rich WYSIWYG editor for Angular with auto-save, special characters, and advanced formatting.
      • dragble-angular-editor - Dual‑mode Angular component blending a designer‑friendly visual editor with an AI‑driven conversational interface.
      • @bobbyquantum/ngx-editor - Angular 21+ fork of `sibiraj-s/ngx-editor`.
      • ngx-email-studio - An Angular 21 frontend email builder for composing, importing, editing, previewing, and exporting responsive email templates.
      • qalma - Angular-first, headless rich text editor toolkit built on ProseMirror.
      • ckeditor - Plugin for Angular.
      • ngx-mermaid-canvas - A visual flowchart editor for Angular that outputs Mermaid syntax.
      • @bloklabs/angular - Angular adapter for [Blok](https://blokeditor.com), a headless block-based rich text editor that outputs JSON instead of HTML.
    • File Upload

      • ng2-file-upload - Easy to use file upload directives.
      • ngx-flow - Angular7+ wrapper for [flow.js](https://github.com/flowjs/flow.js) for file upload.
      • ngx-uploadx - Angular Resumable Upload Module.
      • file-upload - Angular module used for file upload.
      • @georgipeltekov/ngx-file-drop - Angular module for simple desktop file and folder drag and drop. This library does not need rxjs-compat.
      • uppy - [Uppy](https://github.com/transloadit/uppy) is a sleek, modular JavaScript file uploader that integrates seamlessly with any application. It's fast, has a comprehensible API and lets you worry about more important problems than building a file uploader.
      • ngx-custom-material-file-input - File input management for Angular Material.
      • ngxf-uploader - File uploader for Angular 18+.
      • ngx-dropzone-wrapper - Angular wrapper library for [Dropzone](https://www.dropzone.dev/).
      • ngx-file-preview - A powerful preview tool for many file types.
      • ngx-image-upload - A lightweight, customizable library for image uploads with preview, validation, and smooth animations.
      • filestack-angular - Integrate [Filestack](https://www.filestack.com/) into your Angular app for a faster, safer, and more reliable file upload experience.
      • ngx-uploader-file - A versatile Angular file upload library with preview, validation, image cropping, drag-and-drop, and multi-language support.
      • ngx-filesize-pipe - An Angular pipe that converts bytes to a human-readable size, ideal for uploaders and media apps.
      • ngx-file-helpers - Angular file helpers including a file picker and dropzone.
      • Uppy - A sleek, modular JavaScript file uploader that [integrates seamlessly with Angular](https://uppy.io/docs/angular/).
      • ngx-file-uploader - Angular upload components and directives with built‑in file preview.
Sub Categories
Angular 255 Third Party Components 175 Wrappers 94 UI Libraries 82 Free Templates 71 Form Controls 70 Mixed Utilities 69 Internationalization 59 AI 58 Forms 47 HTTP 47 Data Grids 45 Animations 44 Other State Libraries 41 Authentication 40 Editors 40 Google Developer Experts on X 38 CLI Tools 38 Blogs 37 Notifications 37 Charts 35 Scroll 33 Generators and Scaffolding 33 YouTube Channels 32 External Integration 32 Analytics 31 Loaders 31 Icons 30 RxJS 30 Dates 29 TypeScript 27 Carousels 25 Layout 25 UI Libraries built on Tailwind CSS 25 Helpers 24 NgRx 23 Directives 23 Form Validation 23 Component 22 Official Resources 22 Images 22 DOM 22 UI Libraries built on Material 21 File Upload 21 IDE Extensions 20 Training 20 Accessibility 20 Drag and Drop 19 Deployment 19 Books 19 Builders 19 Visual Effects 19 Media 19 Router 19 Community 19 Feature Flags 18 Modals 18 Calendars 18 UI Library and Framework Ionic 18 Markdown 17 Viewers 17 Storage 17 Captcha 17 Updating Angular 16 Performance 16 Linting 15 Code Analysis 15 Pipes 15 E2E 15 Styling 15 Maps 14 JSON Forms 14 Angular Team on X 14 QR Codes 13 Security Best Practices 12 Documentation Tools 12 Onboarding and Product Tours 12 Runtime 12 Keyboard Mouse 12 Debugging 11 UI Libraries built on Bootstrap 11 Cross-Framework Integration 11 Tooltips 11 NGXS 11 Paid Templates 11 Payments 10 Cheat Sheets 10 Server-Side Rendering 10 Desktop Applications 10 Role-Based Access Control 10 Angular Experts on X 10 Exercises 9 Loggers 9 GraphQL 9 UI Primitives 9 PDF 8 Podcasts 8 Cookies 8 Module Federation 8 SEO 7 Certification Programs 7 Newsletters 6 Networking 6 Micro-Frontends 5 CSV 5 Layout Components 4 Editor Components 4 Printing 4 Guides 3 Monorepos 3 Style Guides 3 Editor and IDE Extensions 2 Bluesky 1