Skip to content

ross1296/awesome-angular

BranchesTags
 
 

Repository files navigation

Awesome Angular Awesome

Awesome Angular

logo designed by SAWARATSUKI

This is the Awesome list of the Angular framework, and it contains intriguing libraries in the Angular ecosystem for all developers. Something missing? PRs welcomed!

Repo maintained by @jdegand and @patrickjs

Current Angular version: npm version

Table of contents

Angular

Angular is a development platform for building mobile and desktop web applications.

Official Resources

Community

Newsletters
Podcasts
X
Angular Team
Experts

List of Angular experts you should follow on X (in no particular order). This list is by no means complete.

Google Developer Experts

Learning

Blogs
Books
Certification
  • Certificates.dev - Obtain your Certification of Competence as an Angular Developer.
  • Angular Academy CA - Angular Academy is the #1 provider of hands-on instructor-led classroom training in Canada!
  • Hackerrank - Angular (Basic) Skills Certification Test.
  • Edureka - Angular Certification Course Online.
  • Koenig - Various courses cover Angular separately or full-stack.
  • Simplilearn - Angular Certification Training Course
  • Altitude CSI - Angular Certification Program.
Cheatsheet
Exercises
  • angular-fundamental-lessons
  • Angular Challenges - This repository gathers 50+ challenges related to Angular, Nx, RxJS, NgRx, and Typescript. These challenges revolve around real-life issues or specific features to elevate your skills.
  • Codelabs - Google Developers Codelabs provide a guided, tutorial, hands-on coding experience. Most codelabs will step you through the process of building a small application, or adding a new feature to an existing application.
  • rxjs-fruits - Interactive lessons covering a range of operators in RxJS.
  • angular-debugging-challenge - This repository hosts an Angular-based project designed as a coding and debugging exercise.
  • angular-api-challenge - This repository hosts an Angular-based project designed as a api integration exercise.
Online Training
On-Site Training
YouTube Channels
Style Guides

Accessibility

  • digital.gov - Accessibility for teams guide from USA government.
  • WAI - The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.
  • webaim - Web accessibility in mind.
  • WAVE - WAVE Web Accessibility Evaluation Tools.
  • axe Accessibility Linter - Accessibility linting for HTML, Angular, React, Markdown, Vue, and React Native.
  • Angular Material CDK - a11y - The a11y package provides a number of tools to improve accessibility.
  • PrimeNG - PrimeNG accessibility guide.
  • astral-accessibility - An open-source accessibility widget written in Angular.
  • angular-vlibras - An Angular library that integrates the VLibras accessibility widget into your Angular applications. VLibras provides automatic translation of digital content into the Brazilian Sign Language (Libras), increasing accessibility for users.

AI

Analytics

  • Heap - Heap is the only digital insights platform that gives you complete understanding of your customers’ digital journeys, so you can quickly improve conversion, retention, and customer delight.
  • ngx-tableau - ngx-tableau is an Angular module that allows you to embed a Tableau report in an Angular webapp.
  • ngx-google-analytics - A simple Google analytics integration for Angular apps.
  • ng2-adsense - Angular Adsense Component.
  • ngx-matomo-client - Matomo analytics client for Angular applications.
  • angulartics2 - Vendor-agnostic analytics for Angular2 applications.
  • angular-google-tag-manager - A service library for integrate google tag manager in your angular project.
  • litlyx - The easiest dev-centric analytics tool. Litlyx is an open-source analytics solution for any JavaScript framework. Setup takes less then 30 seconds and just one line of code!

Authentication

  • casl-angular - Module which integrates isomorphic permissions management library CASL with Angular2+.
  • ngx-auth-firebaseui - Angular Material UI component for Firebase authentication.
  • ngx-permissions - Permission and roles based access control for your angular applications(AOT, lazy modules compatible).
  • angular-auth-oidc-client - NPM package for OpenID Connect, OAuth Code Flow with PKCE, Refresh tokens, and Implicit Flow.
  • angular-oauth2-oidc - Support for OAuth 2 and OpenId Connect (OIDC) in Angular.
  • angularx-social-login - Social login and authentication module for Angular 17.
  • ms-identity-javascript-angular-tutorial - A chapterwise tutorial that will take you through the fundamentals of modern authentication with Microsoft identity platform using MSAL Angular.
  • angular2-jwt - Helper library for handling JWTs in Angular apps.
  • keycloak-angular - Easy Keycloak setup for Angular applications.
  • auth0-angular - Auth0 SDK for Angular Single Page Applications.
  • ng-universal - Angular Universal module for Nest framework (Node.js).
  • angularfire - Angular + Firebase.
  • supabase - Build a User Management App with Angular.
  • fingerprint - The Fingerprint Angular SDK is an easy way to integrate Fingerprint into your Angular application.
  • amplify - AWS Amplify streamlines full-stack app development. With its libraries, CLI, and services, you can easily connect your frontend to the cloud for authentication, storage, APIs, and more.
  • cryptr-angular - Codeless Auth platform for business.
  • angular-authentication - An Angular application that demonstrates best practices for user authentication & authorization flows.
  • ngx-security - Security directives for your Angular application to show/hide elements based on a user roles / permissions.
  • ngx-clerk - An unofficial project that aims to provide a seamless integration of Clerk features into Angular applications.
  • ng-supabase - An Angular component library for your Supabase project!
  • zitadel - Secure authentication management for your application. Customize as you grow, with easy APIs and programmable workflows. Focus on growing, your login is in good hands.

Builders

  • Webpack
  • ESBuild
  • Angular Builders - This repo consolidates all the community builders (ES Build, Webpack, Jest, Bazel, and Timestamp) for the Angular build facade.
  • Jest Builder - Jest builder for Angular build facade.
  • Custom Webpack
  • Custom ESBuild
  • Bazel - Provides an Angular CLI Builder, which can execute Bazel when triggered by ng build, ng test, etc.
  • Timestamp - This is explained in this article.
  • ngx-build-plus - Extend the Angular CLI's default build behavior without ejecting, e. g. for Angular Elements.
  • ng-process-env - Angular schematics and builder to retrieve values from System Environment (OS) variables and update relevant environment.ts file.
  • ngx-electronify - Angular CLI builder that runs your application in the desktop using Electron.
  • dotenv-run - Seamlessly load environment variables. Supports cli, esbuild, rollup, vite, webpack, angular, ESM and Monorepos.
  • ng-packagr - Compile and package Angular libraries in Angular Package Format (APF).

CLI

Deployment

Developer tools

  • StackBlitz - Instant Dev Environments.
  • CodeSandbox - An online IDE and prototyping tool for rapid Angular development.
  • IDX - Project IDX is an AI-assisted workspace for full-stack, multiplatform app development in the cloud.
  • Bugfender - A cloud service to collect logs and Angular errors in Real-Time.
  • Angular Dev Tools - Angular DevTools is a browser extension that provides debugging and profiling capabilities for Angular applications.
  • VS Code NG Language Service - This extension provides a rich editing experience for Angular templates.
  • Scuri Code - A VS Code extention that will generate and maintain seeds for your unit tests.
  • Redux DevTools - Can be used in combination with @ngrx/store-devtools to inspect the state of your NgRx app.
  • Ionic VS Code Extension - Perform various functions that are common to developing an Ionic app, all without leaving your VS Code window.
  • Angular Schematics - Ultimate code generation in Visual Studio Code.
  • Angular 17 Snippets - 258 Angular Snippets (TypeScript, Html, Angular Material, Flex Layout, NgRx, RxJS, PWA & Testing).
  • VS Code Angular Snippets - This extension for Visual Studio Code adds snippets for Angular for TypeScript and HTML.
  • Angular Extension Pack - This extension pack packages some of the most popular VS Code Angular extensions.
  • Angular Jester - Generate Jest spec files for Angular projects.
  • Nx Console - Spend less time looking up command line arguments and more time shipping incredible products.
  • VS Code Angular HTML - Syntax highlighting for angular HTML Template files.
  • angular-scaffold - Scaffold an Angular project with all tooling you need for production projects.
  • vscode-angulartools - You can explore an Angular project, enhance documentation, reverse engineer code, and do refactoring with AngularTools.

Documentation tools

  • Storybook- The UI development environment you'll love to use.
  • Compodoc - The missing documentation tool for your Angular application.
  • ng-doc - The documentation engine for Angular projects.
  • docgeni - A modern, powerful and out of the box documentation generator for Angular components lib and markdown docs.

Generators

NET
  • abp - Open-source web application framework for ASP.NET Core! Offers an opinionated architecture to build enterprise software solutions with best practices on top of the .NET.
  • LymeStack - LymeStack is a full-stack, full-featured web application template & toolset designed to provide small businesses and organizations with an accelerated starting point when it comes to creating new apps and adding features to those apps.
Node
  • teleport-code-generators - A collection of code generators for modern JavaScript applications.
  • nx - The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It also enables using Angular Devkit builders and schematics in Nx workspaces.
  • workik - AI Angular code generator that supports all Angular frameworks and libraries.
  • generator-jhipster-ionic - You can use it to generate an Ionic app that talks to a JHipster backend.
  • create-tauri-app - Rapidly scaffold out a new Tauri app project.
Spring Boot
  • Bootify.io - Generate Spring Boot apps with custom database, Angular frontend and CRUD functionality.
  • JHipster - Open source app generator for Spring Boot and Angular.

GraphQL

  • apollo-angular - A fully-featured, production ready caching GraphQL client for Angular and every GraphQL server.
  • buoy - A GraphQL client for Angular built on top of Apollo.
  • graphql-code-generator - A tool for generating code based on a GraphQL schema and GraphQL operations (query/mutation/subscription), with flexible support for custom plugins.
  • hasura - Real world GraphQL tutorials for frontend developers with deadlines!
  • tailcall - This comprehensive guide dives into five powerful approaches for integrating GraphQL into your Angular applications.

HTTP

  • angular2-jwt - Library for sending authenticated HTTP requests and decoding JWTs.
  • ngx-jwt - Angular library for injecting JWT tokens to HTTP requests.
  • ng-http-caching - Cache for HTTP requests in Angular application.
  • cashew - A flexible and straightforward library that caches HTTP requests in Angular.
  • convoyr - Modular HTTP extensions for Angular.
  • angular-http-cache-interceptor - Angular HTTP cache interceptor.
  • ngx-generic-rest-service - Wrapper for Angular services.
  • @ngify/http - A reactive HTTP client in the form of @angular/common/http, offers the following major features: typed response objects, streamlined error handling, request and response interception.
  • ngx-http-annotations - Updated fork of ngx-http-rest, which allows you to interact with rest api in your Angular app through annotations.
  • ng-http-loader - Smart Angular HTTP interceptor - Intercepts automagically HTTP requests and shows a spinkit spinner / loader / progress bar.
  • ngx-signalify - A small library to convert RxJs Observables into Angular Signals.
  • angular-odata - A fluent API for querying, creating, updating and deleting OData resources in Angular.

Integrations

  • ckeditor5-angular - An official CKEditor 5 rich text editor component for Angular 2+.
  • ckeditor4-angular - An official CKEditor 4 rich text editor component for Angular 2+.
  • TailwindCSS + Angular - Integrate Angular app with Tailwind.
  • Sentry - Sentry is a developer-first error tracking and performance monitoring platform.
  • Stencil - Stencil can generate Angular component wrappers for your web components. This can improve Angular performance.
  • GoodData - Integrate GoodData Visualizations into your Angular application.
  • DataDog - With the Datadog Angular integration, you can resolve performance issues quickly.
  • Elastic - Real User Monitoring JavaScript agent with Angular applications.
  • HyperFormula - HyperFormula is a headless spreadsheet built in TypeScript, serving as both a parser and evaluator of spreadsheet formulas. It can be integrated into your browser.
  • Strich - STRICH is a JavaScript library for real-time, multi-format barcode scanning directly in the web browser.
  • Pega - Angular SDK includes a bridge and DX components that connect the ConstellationJS Engine to an Angular-based design system.
  • Genesis Foundation - Genesis is a low-code platform designed specifically for the financial markets.
  • angular-sdk - Angular library used to integrate with Descope.
  • angular-electron - Ultra-fast bootstrapping with Angular and Electron.
  • Postcat - A lightweight, extensible API tool based on Angular and Electron.
  • angulardart-community - The next-generation AngularDart documentation website.
  • NativeScript - NativeScript provides platform APIs directly to the JavaScript runtime (with strong types) for a rich TypeScript development experience.
  • Bit - Leverage Bit to build composable software.
  • google-pay-button - Google Pay button - React, Angular, and custom element.
  • Partytown - Relocate resource intensive third-party scripts off of the main thread and into a web worker.
  • ngx-disqus - Disqus for Angular.
  • ngx-papaparse - Papa Parse wrapper.
  • renovate-config-angular - Angular shareable config for Renovate.
  • ngx-grapesjs - Angular wrapper library for GrapesJS.
  • gojs-angular - A set of Angular components to manage GoJS Diagrams, Palettes, and Overviews.
  • anguhashblog - Seamlessly connects your Angular or Analog application to the Hashnode GraphQL API, providing a template integration with a headless Hashnode setup.
  • angular-tauri - Ultra-fast bootstrapping with Angular and Tauri.
  • ngx-three - Use Three.js with your Angular project in a declarative way.
  • ngx-facebook-messenger - Ngx Facebook Messenger offers a lightweight alternative that optimizes user experiences by significantly reducing initial load size, ensuring smoother page performance, and enhancing overall website efficiency.
  • angular-sdk-plugin - This repository contains a plugin for the Angular framework that integrates with the Split JS SDK.
  • ngx-stripe - A comprehensive library designed for seamless integration of Stripe Elements and payment processing capabilities into Angular applications. Leveraging the powerful features of StripeJS, Ngx Stripe simplifies building robust, secure, and scalable payment solutions.
  • ngx-socket-io - Socket.IO module for Angular.
  • angular-three - Angular Renderer for THREE.js.

Internationalization

  • transloco - 🚀 😍 The internationalization (i18n) library for Angular.
  • transloco-keys-manager - Tools to help reduce monotonous work.
  • ngx-tolgee - Web-based localization tool enabling users to translate directly in the Angular app they develop.
  • localess - Localess is a powerful translation management tool and content management system built using Angular and Firebase. With Localess, you can easily manage and translate your website or app content into multiple languages, and it uses AI to translate faster.
  • typesafe-i18n - A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects.
  • angular-l10n - Angular library to translate texts, dates and numbers.
  • I18N - Soluling has implemented a collection of internationalization (I18N) APIs for .NET, Angular and Delphi.
  • ng-extract-i18n-merge - Extract and merge i18n xliff translation files for angular projects.
  • ng-translate - Angular 2 translation module i18n (internationalization) from JSON file with pluralization (Zero value state included).
  • ngxe - Angular 11.1+ JSON Translations Editor.
  • ngx-translate - The internationalization (i18n) library for Angular.
  • ngx-translate-module-loader - Highly configurable and flexible translations loader for @ngx-translate/core.
  • ngx-translate-multi-http-loader - A loader for ngx-translate that loads translations with http calls.
  • angular-ecmascript-intl - Contains pipes to transform internationalization data using Intl.* browser APIs.
  • i18n-ally - All in one i18n extension for VS Code.
  • ngx-translate-router - Translate routes using ngx-translate.
  • intl-tel-input-ng - An Angular component to easily integrate intl-tel-input.

Monorepos

  • Nx - Nx is a build system with built-in tooling and advanced CI capabilities. It helps you maintain and scale monorepos, both locally and on CI.
  • Turbo - Incremental bundler and build system optimized for JavaScript and TypeScript, written in Rust – including Turbopack and Turborepo.
  • Moon - A build system and monorepo management tool for the web ecosystem, written in Rust.

Security

  • Angular Security - Best Practices
  • Socket - Socket is a developer-first security platform that protects your code from both vulnerable and malicious dependencies.
  • Synk - Snyk is a developer security platform that integrates directly into development tools, workflows, and automation pipelines.
  • Github - Code scanning is available for all public repositories on GitHub.com. You can turn on secret scanning and use Code QL to secure your repos.
  • Github Skills - Guided interactive tutorials for Code Security and analysis are available.
  • HackTricks - Angular Security Checklist.

SEO

  • @davidlj95/ngx-meta - Set your Angular site's metadata: standard meta tags, Open Graph, X Cards, JSON-LD, ... Supports SSR (and Angular Universal). Use a service. Use routes' data. Set it up in a flash! 🚀
  • ngaox - Take Your Angular App Development to the Next Level with Ngaox: Seamless Content Integration, SVG Icon Optimization & Inlining, Advanced SEO & Social-Media Management, and More.
  • ngx-seo - Update SEO title and meta tags easily in Angular apps.
  • seo-analyzer - The library for analyze a HTML file to show all of the SEO defects.
  • ngx-seo - Kwerri OSS: samvloeberghs.be + ngx-seo.
  • angular-react-seo - Angular 17 & React 18 Examples SEO (Search engine optimization).

Server-Side Rendering

Site Templates

Free
  • ngx-admin - Customizable admin dashboard template based on Angular 10+.
  • ng-matero - Angular Material admin dashboard template.
  • coreui-free-angular-admin-template - CoreUI Angular is free Angular 17 admin template based on Bootstrap 5.
  • sakai-ng - Free Angular Admin Template by PrimeNG.
  • angular-template-for-threejs - Angular Template For Three.js.
  • lemon-mart - Angular Template App with a Router-first architecture.
  • devextreme-angular-template - Responsive Application Layout Templates​ based on DevExtreme Angular Components.
  • QuickApp - ASP.NET Core / Angular startup project template with complete login, user and role management. Plus other useful services for Quick Application Development.
  • material-pro-angular-lite - MaterialPro Angular Lite is high quality free angular material template / theme from WrapPixel. You can download and use for Personal as well as Commercial Projects.
  • xtreme-admin-angular-lite - Xtreme is the most powerful & comprehensive free Angular admin template based on Bootstrap Angular.
  • spike-angular-free - Spike is the most powerful & comprehensive free Angular admin template based on Material Angular.
  • Flexy-admin-angular-lite - Flexy is the Most Powerful & Comprehensive free Angular admin template based on Material Angular.
  • admin-pro-angular-lite - AdminPro is the Most Powerful & Comprehensive free Angular admin template based on Bootstrap Angular.
  • monster-angular-lite - Monster is the Most Powerful & Comprehensive free Angular admin template based on Bootstrap Angular.
  • ample-angular-lite - Ample is the Most Powerful & Comprehensive free Angular admin template based on Bootstrap Angular.
  • nice-angular-lite - Nice is the Most Powerful & Comprehensive free Angular admin template based on Bootstrap Angular.
  • elite-angular-lite - WrapPixel's Elite Angular 17 Lite is a competent, powerful, and carefully handcrafted Angular Admin Template with a clean and minimalist design aesthetic.
  • Angular-V17-Template - A template designed for Angular 17 that emphasizes clean code practices and test-friendly development.
  • angular-quickstart - A bare-bones Angular template to get you deployed to Netlify fast!
  • sap-fiori-templates - SAP BTP & Fiori App templates implemented with third-party frontend frameworks such as React, Vue, and Angular.
  • template-angular - Phaser 3 TypeScript project template that uses the Angular framework and Vite for bundling.
  • angular-nest - Simple web app template with Angular v17 + NestJS v9 + ng-openapi-gen.
  • angular-ngrx-frontend - Angular NgRx powered frontend template for Symfony (or similar) backend.
  • Threejs - New Three.js starter app.
  • zen - Nest + Prisma + Apollo + Angular Full Stack GraphQL Starter Kit.
  • Colorlib
  • HTMLrev
  • wails-template-angular-latest - A generated wails template, currently supports Angular 17.
  • carbon-angular-starter - A simple starter app for bootstrapping applications with Carbon.
  • front-angular - This starter kit use angular version 18.0.0 and includes the following features: scalable folder structure, linter and Prettier, routing and lazy loading, authentication service, light design system, toast and modal service, Jest test setup and Docker compose.
  • tailkit-starter-kit-angular - Angular Starter Kit for using Tailkit UI components out of the box in your project.
  • angular-tailwind - Angular & Tailwind CSS Admin Dashboard Starter Kit.
  • angular-starter-kit - Angular project template with Prettier, Linter, Git-Hooks and VS Code settings.
  • fractal-boilerplate-lua-angular - Basic Angular & Lua - FiveM Boilerplate: A streamlined starter kit for web and in-game development with hot builds and utility scripts.
  • angular-nestjs-starter-kit - Angular and NestJS Monorepo setup with NPM Workspaces and Github Actions.
  • angular-sample-app - This sample app demonstrates how to integrate the Descope authentication service into an Angular application. This application includes a login screen using Descope Angular SDK, a user dashboard to display user information and a navigation bar that dynamically adjusts based on the user's authentication state.
  • Angular-18-boilerplate
  • angular-and-firebase-template - An opinionated full-stack starting point for building a web app, using Angular and Firebase.
  • berry-free-angular-admin-template - Berry is a free angular admin dashboard template built with Angular and latest Bootstrap 5. It is meant to provide the best possible User Experience with highly customizable feature-rich pages.
  • gradient-able-free-admin-template - Gradient able free bootstrap, angular, react admin template.
  • mantis-free-angular-admin-template
  • datta-able-free-angular-admin-template
  • sanity-template-angular-clean - A clean Angular SPA that gets content from Sanity.
  • angular-templates - A set of Angular templates for common web apps.
Paid

Testing

  • Testing Angular – A Guide to Robust Angular Applications - A Guide to Robust Angular Applications. A free online book and e-book.
  • Auto-create and -update tests tool - Automate Angular unit test and boilerplate with this schematic.
  • Angular Testing Library - Angular Testing Library builds on top of DOM Testing Library by adding APIs for working with Angular components.
  • ng-mocks - Angular testing library for mocking components, directives, pipes, services and facilitating TestBed setup.
  • ng-mocks-sandbox - A repo with guides and examples for unit tests in Angular applications using ng-mocks.
  • auto-spies - Create automatic spies from classes.
  • @angular/cdk/testing - @angular/cdk/testing provides infrastructure to help with testing Angular components.
  • cypress - End to End and Component Testing for Angular.
  • jasmine - Simple JavaScript testing.
  • karma-image-snapshot - Karma jasmine matcher that performs image comparisons based on jest-image-snapshot for visual regression testing.
  • jest - Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
  • jest-preset-angular - Jest configuration preset for Angular projects.
  • jest-preview - Debug your Jest tests. Effortlessly.
  • jest-marbles - Helpers library for marbles testing with Jest.
  • jest-codemods - Codemods for migrating to Jest.
  • ts-jest - A Jest transformer with source map support that lets you use Jest to test projects written in TypeScript.
  • playwright-ct-angular - Playwright Angular component testing.
  • spectacular - Spectacular offers test harnesses for Angular applications and libraries.
  • spectator - A Powerful Tool to Simplify Your Angular Tests.
  • stryker-js - Mutation testing for JavaScript and friends.
  • testcafe - TestCafe is a user-friendly end-to-end testing solution. Free and open-source test runner. Powerful desktop app.
  • webdriverio - Next-gen browser and mobile automation test framework for Node.js.
  • cypress-harness - This library provides Cypress support to Component Test Harnesses.
  • swc-angular - This is a set of Angular presets that enable you to use SWC (Speedy Web Compiler) with Jest or Vitest.
  • swc-angular-plugin - SWC (Speedy Web Compiler) is a lightning-fast JavaScript/TypeScript compiler, but it doesn't support Angular so you need this plugin.
  • msw - Seamless REST/GraphQL API mocking library for browser and Node.js.
  • ngx-speculoos - Simpler, cleaner Angular unit tests.
  • shallow-render - Angular testing made easy with shallow rendering and easy mocking.
  • angular-tour-of-heroes-jest-100-coverage - 100% unit testing coverage of the popular Angular demo app - Tour of Heroes.
  • how-do-i-test - Repository representing different testing use cases for Angular and Spring.
  • YouTube - How do I Test? playlist.
  • YouTube - Angular Unit Testing Made Easy.
  • Tim Deschryver Blog - Testing an NgRx project.
  • angular-unit-test-helper - Helper functions to help write unit tests in Angular using mocks and spies.
  • ngentest - Angular6+ Unit Test Generator For Components, Directive, Services, and Pipes.
  • angular-testing-kit - A set of convenient utilities to make Angular testing with Jasmine and Karma simpler.
  • nightwatch-plugin-angular - Official Nightwatch plugin which adds component testing support for Angular apps. It uses the Webpack DevServer under the hood. Requires Nightwatch 2.4+.
  • Puppeteer Angular Schematic - Adds Puppeteer-based e2e tests to your Angular project.

Updating

  • angular update guide - Interactive guide to help you migrate from one version of Angular to another.
  • ng update - Use the CLI to update your project or try new Angular features by adding the --next flag.
  • migrations - Angular offers schematics to help update your project for you. You can convert your project to standalone components, the new control flow syntax, and more by using one of the Angular built-in schematics.
  • ng-morph - Code mutations in your project or schematics were never easier than now.
  • ngx-libs - Angular Libraries Support lists community libs support for each Angular version.
  • ng16-dep-audit - Quickly check which dependencies stop you from upgrading!
  • ngx-maintenance - Can't upgrade to Angular 16+ due to old View Engine dependencies? This automates the hassle so you can easily upgrade!

Third Party Components

Animations

Calendars

  • angular-calendar - A flexible calendar component for angular 6.0+ that can display events on a month, week or day view.
  • angular-calendar-scheduler - A scheduler view component for angular.
  • ng-fullcalendar - Fullcalendar module for Angular.
  • fullcalendar-angular - The official Angular component for FullCalendar.
  • angular-year-calendar - A powerful and performant Angular year calendar library built with ❤️.
  • @schedule-x/angular - Material design event calendar.
  • angular-calendar-timeline - A timeline for Angular 13+ that shows tasks or events on a timeline in different modes: days, weeks, and months. This library is pretty small and DOESN'T use big dependencies like JQuery or Moment.js. Library also supports SSR.

Carousels

Charts

  • ng2-charts - Beautiful charts for Angular2 based on Chart.js.
  • ngx-charts - Declarative Charting Framework for Angular2 and beyond!
  • ng-apexcharts - Angular wrapper for ApexCharts to build interactive visualizations in Angular 7+.
  • ng-chartist - Angular component for Chartist.js.
  • org-chart - Highly customizable org chart. Integrations available for Angular, React, and Vue.
  • ag-charts - Fully-featured and highly customizable JavaScript charting library.
  • systelab-charts - Systelab Angular Chart services.
  • ngx-gantt - A modern and powerful gantt chart component for Angular.
  • carbon-charts - Carbon Charts Angular is a thin Angular wrapper around the vanilla JavaScript @carbon/charts component library.
  • dag - An Angular service for managing directed acyclic graphs.
  • ngx-simple-charts - Angular 17+ library for D3 based line, bar, donut and date/timeline charts with multiple entry points. A configurable service for token handling is provided.
  • ng-flowchart - A lightweight Angular Library for building drag and drop flow charts. Chart behavior and steps are customizable. Data can be exported or uploaded in json format.
  • ngx-echarts - Angular directive for Apache ECharts.
  • angular-fusioncharts - Angular Component for FusionCharts JavaScript Charting Library.
  • ngu-flow - Angular flow diagram library.
  • highcharts-angular - Official minimal Highcharts integration for Angular.
  • angular-highcharts - Highcharts directive for Angular.
  • Foblex - Angular Powered Flow-Chart Library.

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 for Angular provide excel-style filtering, live-data, sorting, draggable row and other toolbar.
  • sheetjs - SheetJS is a JavaScript library for reading and writing data from spreadsheets.
  • ngx-easy-table - The Easiest Angular Table. 12kb gzipped! Tree-shakeable. 55 features and growing!
  • 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.
  • ui-grid - UI Grid: an Angular Data Grid.
  • jspreadsheet - Jspreadsheet is a lightweight vanilla javascript plugin to create amazing web-based online interactive tables and spreadsheets compatible with other spreadsheet software.
  • handsontable - Handsontable is a popular JavaScript data grid component that brings the well-known look and feel of spreadsheets to your application.
  • ngx-export-as - Angular 2+ / Ionic 2+ HTML/table element to export it as JSON, XML, PNG, CSV, TXT, MS-Word, Ms-Excel, and PDF.
  • datagrid - Angular TanStack table with shadcn Theme.
  • angular-datatables - An Angular2+ library for building complex HTML tables using the DataTables jQuery plug-in.
  • angular-slickgrid - A wrapper of the lightning fast & customizable SlickGrid datagrid. It also includes multiple styling themes.
  • revogrid - Powerful virtual data grid smartsheet with advanced customization. Best features from Excel plus incredible performance.

Dates

DOM

  • ngx-resize-observer - Angular 8+ module for detecting when elements are resized.
  • ng-resize-observer
  • 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.
  • ng-in-viewport - Allows us to check if an element is within the browsers visual viewport.
  • ngx-breakpoint-observer - This library adds reactive breakpoint and media query methods based on Signals.
  • ngx-dynamic-hooks - Automatically insert live Angular components into dynamic strings (based on their selector or any pattern of your choice) and render the result in the DOM.
  • edit-in-place - A flexible and unopinionated edit in place library.
  • 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.
  • ng-generic-pipe - Generic pipe for Angular application.
  • safe-pipe - Angular pipe for sanitizing your unsafe content.
  • ngxd - NgComponentOutlet + Data-Binding + Full Lifecycle = NgxComponentOutlet for Angular 7+.
  • ngx-quicklink - Quicklink prefetching strategy for the Angular router.
  • ngx-highlightjs - Instant code highlighting, auto-detect language, super easy to use!
  • ngx-sharebuttons - Angular share buttons.
  • ngx-pipes - Useful pipes for Angular with no external dependencies!
  • nglrx/pipes - A library of useful pipes for Angular apps.
  • ng-helpers - A collection of useful components, directives and pipes for Angular.
  • ng-condition - An alternative directive to *ngIf; else that simplifies conditions in HTML templates.
  • ngx-sticky-kit - Angular Sticky makes HTML elements sticky. For instance, the header, the menu, the sidebar or any other block can be stuck at the desired position.

Drag and Drop

  • ng2-dragula - Drag and Drop so simple it hurts!
  • ngx-drag-drop - Angular directives using the native HTML Drag And Drop API.
  • 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 cdk - The @angular/cdk/drag-drop module provides you with a way to easily and declaratively create drag-and-drop interfaces.
  • moveable - Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, and Snappable.

Editor Components

File Upload

  • ng2-file-upload - Easy to use file upload directives.
  • ngx-awesome-uploader - Angular Library for uploading files. It supports: File Upload and Preview (additionally preview images with lightbox), validation, image cropper, drag and drop with multi language support.
  • ngx-flow - Angular7+ wrapper for flow.js for file upload.
  • ngx-uploadx - Angular Resumable Upload Module.
  • file-upload - Angular module used for file upload.
  • ngx-filepond - A handy FilePond adapter component for Angular.
  • ngx-file-drop - Angular module for simple desktop file and folder drag and drop. This library does not need rxjs-compat.
  • uppy - 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.

Forms

General
  • angular-imask - Angular input mask.
  • ngx-mask - Angular Plugin to make masks on form fields and html elements.
  • maskito - Collection of libraries to create an input mask which ensures that user types value according to predefined format.
  • ngx-formly - JSON powered / Dynamic forms for Angular.
  • formio - JSON powered forms for Angular.
  • ng-dynamic-forms - Rapid form development library for Angular.
  • fluent-form - Building dynamic form in Angular with Fluent API or JSON.
  • reactive-forms - (Angular Reactive) Forms with Benefits.
  • ng-signal-forms - Signal powered Angular Forms.
  • ngx-sub-form - Utility library for breaking down an Angular form into multiple components.
  • forms-typed - Want types in your forms? Want to have nested forms? This is library can help.
  • ngx-vest-forms - A lightweight adapter for Angular template-driven forms integrated with vest.js for validation.
Form Controls
Validation
  • ngx-valdemort - Simpler, cleaner Angular validation error messages.
  • ngx-validator - About Angular 7+ Validator, a library handle validation messages easy and automatic.
  • validointi - This is a library to help you validate your template driven forms.
  • ngx-reactive-forms-utils - Provides easy validation error display and custom validators.
  • angular-reactive-validation - Reactive Forms validation shouldn't require the developer to write lots of HTML to show validation messages. This library makes it easy.
  • ngx-formcontrol-errors - A directive for showing errors in Angular form controls.
  • error-tailor - Making sure your tailor-made error solution is seamless!

Icons

  • angular-fontawesome - Official Angular component for Font Awesome 5+.
  • angular2-fontawesome - Angular2 Components and Directives for FontAwesome.
  • ng2-fontawesome- A small directive making font awesome even easier to use.
  • ngx-icon-blur - An Angular component that can be used to create a frosted glass effect for icons.
  • ng-icons - The ultimate icon library for Angular.
  • primeicons - PrimeIcons is the default icon library of PrimeNG with over 250 open source icons developed by PrimeTek.
  • angular-svg-icon - Angular component and service for inlining SVGs allowing them to be easily styled with CSS.
  • svg-icon - A lightweight library that makes it easier to use SVG icons in your Angular Application.
  • ng-svg-icon-sprite - Angular 16+ package for generating and using inline SVG icons in your project.
  • Angular-Svg-Sprite - Simplify SVG icon usage in your Angular project! Enhance the flexibility and manageability of your Angular project by using SVG sprites.
  • ng-hero-icons - Use Heroicons in your Angular application.
  • ionic-angular-collect-icons - This library is used to uniquely group the ionIcons in a project, and generate for export ionIcons file.
  • ngx-fluent-ui - Angular & online library for Microsoft Fluent UI icons.
  • angular-remix-icon - Angular wrapper for Remixicon icon library.
  • angular-line-awesome - Angular Line Awesome is an Angular component to manage Line Awesome icons.
  • ngx-bootstrap-icons - This Angular module allows you to use the Bootstrap Icons in your Angular application without additional dependencies.
  • ngx-icon - An Angular component for displaying SVG icons.
  • angular-feather - This package allows you to use Feather Icons in your Angular applications.
  • angular-tabler-icons - This package allows you to use the Tabler Icons in your Angular applications.
  • icon-lib-builder - Small tool to generate a Framework component (React, Preact, Angular, Svelte or Vue) from a SVG icon.
  • svg-icons-builder - Angular builder to build svg-icons using svg-to-ts.
  • ngx-fast-svg - SVGs, fast and developer friendly in Angular.
  • angular-techs-logos - Library of tech related icons.

Images

  • ngx-img-fallback - Load placeholder image on image error, Angular 5+.
  • ngx-image-zoom - Angular component for zoomable images.
  • ngx-image-hero - A package to implement hero animations, allowing users to click on images and smoothly zoom them into a larger, immersive view, enhancing the user experience and interaction with images.
  • ngx-image-compress - Angular library for uploading and compressing images.
  • ngx-image-cropper - An image cropper for Angular.
  • ng-cloudimage-responsive - Cloudimage responsive plugin will make your website load the exact image size you need depending on your user's screen size.
  • angular-cropperjs - Cropper.js integration for Angular 6+.
  • cloudinary - Angular SDK from Cloudinary.
  • img-comparison-slider - Image comparison slider. Compare images before and after. Supports React, Vue, and Angular.
  • @unpic/angular - Angular directive for responsive, high-performance images. Generates a responsive <img> tag that follows best practices, with the correct srcset, sizes and styles. Detects image URLs from most image CDNs and CMSs and can resize images with no build step.

Keyboard Mouse

Layout Components

  • angular-split - Angular split component.
  • egjs-infinitegrid - Arrange infinite card elements according to various layout types like masonry for Angular.
  • overview - A collection of tools to make your Angular views more modular, scalable, and maintainable.
  • ngx-layout - Clone of Angular FlexLayout.
  • ng-sortgrid - A grid that allows you to sort all items via drag & drop.
  • angular-gridster2 - Angular gridster 2.
  • angular-grid-layout - Responsive grid with draggable and resizable items for Angular applications.
  • ng2-tree - Angular tree component.
  • gridstack - Mobile-friendly modern Typescript library for dashboard layout and creation. Making a drag-and-drop, multi-column responsive dashboard has never been easier. Has multiple bindings and works great with Angular.

Loaders

Loggers

  • lumberjack - Lumberjack is a versatile Angular logging library, specifically designed to be extended and customized. It provides a few simple log drivers out-of-the-box. It's easy to enable the built-in log drivers or create and use custom log drivers.
  • ngx-logger - NGX Logger is a simple logging module for Angular (6+). It allows "pretty print" to the console, as well as allowing log messages to be POSTed to a URL for server-side logging.
  • angular-logger - A logger built with Angular in mind.
  • ngx-action-logger - Logger for Angular applications, capable of both outputting data to the console or sending data to elastic.
  • @Xilerth/ngx-logger - This library empowers developers to seamlessly integrate custom logging solutions tailored to their specific requirements, enabling efficient debugging, monitoring, and analytics.
  • pretty-html-log - A module that allows you to pretty print the inner HTML of ComponentFixtures, DebugElements, NativeElements or even plain HTML strings to the console. This is very useful for debugging Angular component tests in Jest.

Maps

Markdown

Mixed utilities

  • rx-angular - RxAngular offers a toolkit for handling fully reactive apps with the main focus on runtime performance, template rendering, and developer experience.
  • trellisorg platform - The Trellis Open Source Repo contains projects and tools, some of which Trellis uses internally, but has opened sourced for the community to use.
  • ng-web-apis - A set of common utils for consuming Web APIs with Angular.
  • daffodil - Angular Ecommerce PWA Framework.
  • ngworker - Monorepo for the @ngworker NPM organization. Packages for Angular applications and testing.
  • myndpm - Open Source Angular Libraries contributed by @myndpm.
  • jscutlery devkit - Tools that make Angular developer's life easier.
  • angular components - Component infrastructure and Material Design components for Angular.
  • lithium-angular - Reactive components made easy! Lithium provides utilities that enable seamless reactive state and event interactions for Angular components.
  • rxweb - Tons of extensively featured packages for Angular, Vue and React Projects.
  • jsonforms - Customizable JSON Schema-based forms with React, Angular and Vue support out of the box.
  • ngspot - Collection of awesome Angular libraries.
  • ngx-grpc - Angular gRPC framework.
  • ts-cacheable - A popular platform-agnostic caching library.
  • ngxtension-platform - Utilities for Angular.
  • spartan - Cutting-edge tools powering Angular full-stack development.
  • ngify - Use Angular features outside of Angular.
  • ng-vibe - Designed for Angular 17+, these tools (drawer, dialog, toastify,timer, service-locator) are here to enhance your development process with dynamic and efficient solutions.
  • angular-kit - A set of powerful Angular tools including pipes, lifecycle hooks, and reactive enhancements.
  • angular-ru-sdk - A set of tool chains that implement common interaction patterns while being unopinionated about their presentation. It represents an abstraction of the core functionalities found in Angular.
  • dfts-common - Collection of TypeScript and Angular libraries (QR Code, Bootstrap table and icons, and other utilities).
  • sba-angular - Sinequa's Angular-based Search Based Application (SBA) Framework.
  • ng-as - Angular pipe and directive for type casting template variables.
  • angular-toolbox - A library that provides useful tools for Angular apps development.

Modals

  • ngx-awesome-popup - Angular dialog modal framework (Confirmation box, Alert box, Toast notification and Cookie banner).
  • dialog - A simple to use, highly customizable, and powerful modal.
  • ngx-modal-ease - ngx-modal-ease is a versatile Angular library providing a lightweight, simple, and performant modal.
  • ngx-smart-modal - Modal/Dialog component crafted for Angular (Ivy-compatible).

Notifications

  • ngx-sweetalert2 - Declarative, reactive, and template-driven SweetAlert2 integration for Angular.
  • ngx-toastr - Notifications/Toastr.
  • hot-toast - Smoking hot toast notifications for Angular.
  • ngx-sonner - An opinionated toast component for Angular. A port of @emilkowalski's sonner.
  • angular-bootstrap-toast-service - Angular project for sending Bootstrap based toast notifications including Vercel deployment.
  • angular2-notifications - A light and easy to use notifications library for Angular.
  • OneSignal - With onesignal-ngx, you can integrate OneSignal, world's leader for Mobile Push Notifications, Web Push, and In-App Messaging, into your Angular app.
  • ngx-notifier - A Simple Notification Service for Angular applications.

QR Codes

  • ng-qrcode - Easy to use AOT compatible QR code generator for Angular projects.
  • angularx-qrcode - A fast and easy-to-use Ivy compatible Ionic and Angular QR Code Generator library.
  • dfts-qrcode - A tiny and simple-to-use JavaScript / TypeScript QR-Code generator library. Fully type-safe and ES modules compatible.
  • ngx-scanner - Angular QR code, Barcode, DataMatrix, scanner component using ZXing.
  • qrcode.angular - QR Code implementation based on Angular.
  • ng-qrcode-svg - Simple QR code generator (SVG only) for Angular.

Scroll

  • ngx-ui-scroll - Virtual/infinite scroll for Angular.
  • ngx-page-scroll - Animated scrolling functionality for Angular written in pure TypeScript.
  • ngx-infinite-scroll - Infinite Scroll Directive for Angular.
  • ngx-scroll-animations - This minimalistic Angular directive, free from external dependencies, empowers you to effortlessly implement CSS animations on elements. These animations trigger when an element comes into view through scrolling on the page. It seamlessly integrates with your choice of CSS animations.
  • lithium-ngx-virtual-scroll - A fast and lightweight virtual scrolling solution for Angular that supports single column lists, grid lists and view caching.
  • @robingenz/ngx-infinite-scroll - Simple Angular directive for infinite scrolling.
  • angular-fullpage - Official component for fullPage.js, a fullscreen scrolling library.
  • ngx-scrolltop - Lightweight, Material Design inspired button for scroll-to-top of the page. 🔼 No dependencies. Pure Angular! (Compatibility: Angular 9, Ivy, Universal, ng add).
  • OverlayScrollbars - A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling.
  • ng-table-virtual-scroll - Virtual Scroll for Angular Material Table.
  • ngx-scrollbar - Custom overlay-scrollbars with native scrolling mechanism.

State Management

  • universal-model-angular - Store and state management for Angular.
  • ng-simple-state - Simple state management in Angular with only Services and RxJS.
  • exome - Simple proxy based state manager for deeply nested states, works with Angular Signals and RxJS.
  • ngxs - NGXS tries to make things as simple and accessible as possible with less boilerplate and code to maintain.
  • ngrx - Reactive State for Angular.
  • query - Powerful asynchronous state management, server-state utilities and data fetching for the web.
  • elf - A reactive immutable state management solution built on top of RxJS. It uses custom RxJS operators to query the state and pure functions to update it.
  • state-adapt - Declarative, incremental state management library.
  • ngx-signal-state - Opinionated simple state management for Angular.
  • mini-rx-store - MiniRx is the reactive state management platform.
  • ngx-collection - Collection State Management Service for Angular.
  • xstate - Actor-based state management & orchestration for complex app logic.
  • signalstory - A state management library based on Angular signals. It offers a range of architectural options, from simple repository-based state management (signal-in-a-service) to orchestrating decoupled commands, handling side effects through encapsulated objects, and facilitating inter-store communication using an event-driven approach.
  • ngx-sherlock - ngx-sherlock is an Angular tooling library to be used with the @politie/sherlock distributed reactive state management library.
  • tansu - A lightweight, push-based state management library. It works well with the Angular ecosystem.
  • @tethys/store - A mini, yet powerful state management library for Angular.

Storage

  • ngx-reactive-storage - Wrapper around IndexedDB and localStorage that allows you to create databases and tables using a simple, promise-based API. Changes to the data can be seen with Angular Signals or RxJS Observables.
  • ng2-webstorage - LocalStorage and SessionStorage manager.
  • ngx-indexed-db - Wraps IndexedDB in an Angular service.
  • angular-async-local-storage - Efficient client-side storage for Angular: simple API + performance + Observables + validation.
  • ng-web-apis/storage - This is a library to use Web Storage API with Angular.
  • ngx-odm - Angular 14+ wrapper for RxDB.

Tooltips

UI Libraries

Unspecified
  • Dev Extreme - Feature-Complete 65+ Angular Component Suite.
  • Syncfusion - The Complete Angular Components Library.
  • ej2-angular-ui-components - Syncfusion Angular UI Components library has been built from the ground up to be lightweight, responsive, modular and touch friendly. It offers 70+ UI components that every applications will ever need.
  • Nebular - Customizable Angular UI Library based on Eva Design System.
  • NG ZORRO MOBILE - An enterprise-class mobile UI components based on Ant Design Mobile and Angular.
  • NG ZORRO - An enterprise-class UI components based on Ant Design and Angular.
  • ngx-ui - Style and Component Library for Angular2 and beyond!
  • prime-ng - The Most Complete Angular UI Component Library.
  • Wijmo 5 - Set of UI components for Angular2.
  • Taiga UI - Powerful set of open source components for Angular!
  • AgnosUI - Highly configurable headless framework agnostic component library.
  • ng-devui - Angular UI Component Library based on DevUI Design.
  • ng-aquila - Aquila is an open-source component library provided by the Allianz Global Digital Factory (GDF). We use this library internally with Allianz branding. Here we provide a white label variant of these components.
  • enterprise-ng - Angular wrappers for IDS Enterprise components.
  • oblique - An Angular front-end framework Tailored for your swiss branded business web application, Oblique provides a standardized corporate design look and feel as well as a collection of ready-to-use Angular components.
  • fundamental-ngx - Fundamental Library for Angular is SAP Design System Angular component library.
  • designsystem - Kirby Design System is a UX Component library implementing the Kirby Design Philosophy.
  • sbb-angular - Angular Library for SBB.
  • ui - Enterprise level Angular UI framework from Alauda Frontend Team.
  • ngx-tethys - Fast and reliable Tethys Design components for Angular.
  • antwerp-ui_angular - Antwerp UI is a component interface library for building user interfaces and responsive web apps.
  • ng-clarity - Clarity Angular is a scalable, accessible, customizable, open-source design system built for Angular.
  • ngx-semantic - A new take on an Angular implementation for Semantic UI.
  • ngx-float-ui - Angular wrapper for the Floating UI library.
  • orchestrator - Extensible orchestrator for UI and forms for Angular.
  • winonang - Part of the Winona UI suite, aimed at providing seamless UI components for Angular developers. Our goal is to ensure that these components work flawlessly on Windows, but they are designed to be cross-platform compatible as well.
  • carbon-components-angular - An Angular implementation of the Carbon Design System for IBM.
  • ng-primitives - A low-level UI component library with a focus on accessibility, customization, and developer experience.
  • dyte-io/ui-kit - Dyte's UI Kit is a prebuilt design library of UI components that makes it easy to integrate video and voice calls into any app or website within minutes.
  • onega-ui - A modern and stylish UI kit that offers a wide range of UI components and elements to create professional and attractive websites.
  • sky-ui - Angular UI kit.
  • ngx-neumorphic - Angular Neomorphism UI kit.
  • ng-zen - A versatile Angular library and CLI tool offering UI-kit Angular schematics for streamlined integration into projects. The tool is currently in the Alpha phase.
  • pupakit - Angular UI Kit based on an atomic approach to building interfaces (Not production ready).
  • ngwr - Angular UI kit to make stylish Angular applications.
  • Windmillcode-Angular-CDK - Provides a collection of reusable UI components, each crafted with attention to detail and performance.
  • ng-vcl - Angular VCL ‒ an Angular component library based on the VCL CSS eco system.
  • ngx-ui - NGXUI from Omnedia is a collection of standalone components that you can simply install and use in your Angular projects. It primarily features components, blocks, and templates geared towards creating landing pages and user-facing marketing materials.
Material Based
Bootstrap Based
  • angular-bootstrap-md - Material Design for Bootstrap 5 & Angular 17.
  • ng-bootstrap - Angular widgets built from the ground up using only Bootstrap 5 CSS with APIs designed for the Angular ecosystem.
  • ngx-bootstrap - Fast and reliable Bootstrap widgets in Angular (supports Ivy engine).
  • design-angular-kit - A toolkit based on Bootstrap Italia for the creation of web applications developed with Angular.
Tailwind CSS Based
  • Flowbite - Open-source UI components built with Tailwind CSS with support for Angular.
  • David UI Angular - Components library for enterprise-level projects based on Tailwind CSS and Angular.
  • Tailkit UI - Carefully crafted, easy to customize, fully responsive Tailwind CSS Components, Templates and Tools for your Tailwind CSS based projects.
Node Based
  • ngx-vflow - An open source library to build node-based UI with Angular.

UX Components

Viewers

  • ng2-pdf-viewer - PDF viewer component.
  • ngx-extended-pdf-viewer - A full-blown PDF viewer for Angular 16, 17, and beyond.
  • ng2-pdfjs-viewer - An Angular component for PDFJS and ViewerJS (Supports all versions of Angular).
  • ngx-json-viewer - JSON formatter and viewer in HTML for Angular.
  • ngx-diff - Angular component library for displaying diffs of text.
  • infinite-viewer - Infinite Viewer is a document viewer component with infinite scrolling.
  • ngx-doc-viewer - This component can be used to show several different document types in an Angular app.
  • ngx-treeview2 - An Angular treeview component with checkbox.

Misc Components

  • ngx-countdown - Simple, easy and performant countdown.
  • xng-breadcrumb - Zero config breadcrumb solution. A lightweight, configurable and reactive breadcrumbs for Angular 6 and beyond.
  • ng-portal - Component property connection in Angular application.
  • ng-lock - Angular decorator for lock a function and user interface while a task running.
  • rx-computed - The async RxJS-based version of signals' computed().
  • microwave - Optimize Angular change detection effortlessly.
  • falso - All the Fake Data for All Your Real Needs.
  • ngx-device-detector - An Angular v7+ library to detect the device, OS, and browser details.
  • ngx-feature-toggle - Your module to handle with feature toggles in Angular applications easier.
  • runtime-config-loader - This is an Angular library that provides an easy way to load a configuration JSON file for runtime configuration.
  • ng-polymorpheus - Polymorpheus is a tiny library for polymorphic templates in Angular.
  • ngx-cookieconsent - Cookie Consent module for Angular.
  • ngx-cookie-service - Angular (4.2+ ...12) service for cookies. Originally based on the ng2-cookies library.
  • gui - JSON powered GUI for configurable panels.
  • ng2csv - Angular service for saving data to CSV file.
  • @ui-router/angular - UI-Router for Angular: State-based routing for Angular.
  • ngx-csv-parser - CSV Parser for Angular by Developers Hive.
  • angular-tag-cloud-module - With this module, you can generate word clouds / tag clouds.
  • ngx-lipsum - Easily use lorem-ipsum dummy texts in your angular app as directive, component or by using a service.
  • angular-audio-context - An Angular wrapper for the Web Audio API's AudioContext.
  • ngx-parallax-stars - Angular library to create beautiful stars with parallax effect.
  • angular-twitter-timeline - Angular Public Twitter Timeline Widget.
  • ng-parsel - Parse your Angular code base to JSON abstraction - Great for displaying APIs and running custom analysis.
  • ngx-signal-immutability - Compile-time and runtime immutability for Angular signals.
  • angular-paginator - Pagination Component for Angular applications.
  • ngx-flamegraph - Flame graph for stack trace visualization written in Angular.
  • angular-compiler-output - See the JS output of the Angular compiler for a given angular template.
  • ng-dynamic-mf - Truly dynamic modules at runtime with Module Federation.
  • ngx-font-picker - Google fonts font picker widget for Angular.
  • ngx-flagr - Effortless feature flag management in Angular.
  • module-federation-plugin - Module Federation allows loading separately compiled and deployed code (like micro frontends or plugins) into an application. This plugin makes Module Federation work together with Angular and the CLI.
  • ng2-idle - A module for responding to idle users in Angular applications.
  • ng2-gauge - SVG gauge component for Angular.

Ionic

Ionic is the beautiful, open source front-end SDK for developing hybrid mobile apps with web technologies.

  • Ionic Framework - Official Website for Ionic Framework.
  • (Github) Ionic Framework - Github Repo of Ionic Framework.
  • Ionic Academy - The fastest way to learn Ionic.
  • Elite Ionic - Advanced training for Angular developers who want to create NEXT LEVEL native web applications.
  • Ionic Themes - Tutorials and templates.
  • Ionic Start - Build web and native mobile applications with Ionic whilst learning modern reactive development with Angular.
  • awesome-cordova-plugins - Native features for mobile apps built with Cordova/PhoneGap and open web technologies. Complete with TypeScript support.
  • ionic-angular-library - A collection of components and services that are useful for developing Ionic Angular applications.
  • ionic-angular-collect-icons - This library is used to uniquely group the ionIcons in a project, and generate for export ionIcons file. In small projects, it is difficult to manage addIcons() of ionIcons each time, so we automated it.
  • IDEA-Ionic8-extra - IDEA's extra components and services built on Ionic 8, and distributed with different NPM packages.

NgRx

  • ngrx - Reactive State for Angular.
  • ngrx-course - Angular University Complete Guide.
  • ngrx-store-localstorage - Simple syncing between @ngrx/store and local storage.
  • ngrx-toolkit - Various Extensions for the NgRx Signal Store.
  • ngrx-traits - NgRx Traits is a library to help you compose and reuse a set NGRX actions, selectors, effects, and reducers across your app.
  • ngrx-addons - A collection of NgRx addons, including state persistence.
  • ngrx-store-storagesync - Highly configurable state sync library between localStorage/sessionStorage and @ngrx/store.
  • ngrx-store-formsync - Synchronize any reactive form to @ngrx/store.
  • ngrx-wieder - Lightweight undo-redo for Angular with NgRx & Immer.js.
  • ngrx-immer - Immer wrappers around NgRx methods createReducer, on, and ComponentStore.
  • ngrx-rtk-query - Make RTK Query with Hooks works in Angular Applications.
  • ngrx-action-bundles - This library allows you to reduce ngrx boilerplate by generating action bundles for common ngrx redux store scenarios and allows you to easily connect state, dispatch actions and listen for actions everywhere across your applications.
  • angular-ngrx-nx-realworld-example-app - Real world application built with Angular 17, NgRx 17, & Nx 17.
  • ngx-view-state - Library for handling Loading/Success/Error in NgRx.
  • store-service - Adds an abstraction layer / facade between Angular components and the NgRx store.

RxJS

  • rxjs - Reactive Extensions Library for JavaScript.
  • learn-rxjs - Clear examples, explanations, and resources for RxJS.
  • rxjs-course - RxJs course from Angular University
  • redux-observable - RxJS middleware for action side effects in Redux using "Epics".
  • rxjs-challenge - A set of little RxJS puzzles to practice your Observable skills.
  • operators - This package regroups a couple of RxJS operators meant to simplify some common patterns.
  • until-destroy - RxJS operator that unsubscribe from observables on destroy.
  • effects - A framework-agnostic RxJS effects implementation.
  • ngx-observable-lifecycle - Library for observing the lifecycle of an (ivy compiled) angular component.
  • rx-sandbox - Marble diagram DSL based test suite for RxJS.
  • observer-spy - This library makes RxJS Observables testing easy!
  • ngx-operators - RxJS operators for Angular.
  • rxjs-toolbox - Set of custom operators and handy factory functions for RxJS.
  • subscribable-things - A collection of reactive wrappers for various browser APIs.
  • ngx-rxjs-zone-scheduler - A library for Angular providing RxJS schedulers to run some kind of work inside or outside of NgZone.
  • rxjs-broker - An RxJS message broker for WebRTC DataChannels and WebSockets.
  • rxjs-insights - See through the observables.
  • observable-webworker - Simplified API for working with Web Workers with RxJS.
  • ng-event-bus - RxJS-based message bus service for Angular.
  • audit-debounce - RxJS operator to debounce and audit simultaenously.

TypeScript

  • TypeScript - Official Website for TypeScript.
  • REPL - Official TypeScript REPL that runs entirely in your browser.
  • TypeScript Repository (GitHub) - Official GitHub Repo for TypeScript.
  • DefinitelyTyped Repository (GitHub) - The repository for high quality TypeScript type definitions.
  • typehero - Connect, collaborate, and grow with a community of TypeScript developers.
  • type-challenges - Collection of TypeScript type challenges with online judge.
  • typescript-challenges - A set of challenges helping you understand TypeScript.
  • Sheriff - Lightweight Modularity for TypeScript Projects.
  • Total Typescript Book - The companion repo for the upcoming Total TypeScript book.
  • ts-essentials - All essential TypeScript types in one place.
  • trpc - Move Fast and Break Nothing. End-to-end typesafe APIs made easy.
  • quicktype - Generate types and converters from JSON, Schema, and GraphQL.
  • ts-pattern - The exhaustive Pattern Matching library for TypeScript, with smart type inference.
  • ngx-mf - Bind your model types to angular FormGroup type.
  • superstruct - A simple and composable way to validate data in JavaScript (and TypeScript).
  • typebox - Json Schema Type Builder with Static Type Resolution for TypeScript.
  • zod - TypeScript-first schema validation with static type inference.
  • valibot - The modular and type safe schema library for validating structural data.

Other Lists

This Awesome List excludes some libraries that don't yet support Angular 16+. If you are still supporting or using older versions of Angular, you could find great resources in one of the lists below.

License

CC0

About

📄 A curated list of awesome Angular resources

patrickjs.github.io/awesome-angular/

Resources

Readme

License

CC0-1.0 license
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages

  • HTML 74.6%
  • CSS 23.3%
  • Shell 2.1%