Giters

PatrickJS / awesome-angular

:page_facing_up: A curated list of awesome Angular resources

Home Page:https://patrickjs.github.io/awesome-angular/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

angular2angular4awesomeangularawesome-listangular9angular10angular11angular-components

Awesome Angular

Awesome Angular Awesome

This is the original Awesome list of the Angular2 framework, today known as just Angular. This repository contains intriguing libraries and repos in the Angular ecosystem for both inexperienced and seasoned developers.

Current Angular version:

npm version

Table of contents:

Angular

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

Official Resources

Community

Angular Team on twitter

Experts on Twitter

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

Google Developer Experts

Blogs

Server-Side Rendering

Material Design

Cheatsheet

Testing

Angular CLI

Webpack

YouTube Channels

Style Guides

Books

On-Site Training

Online Training

Integrations

  • GraphQL + Angular - Caching GraphQL client for Angular and every GraphQL server
  • 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.
  • ngx-google-analytics - A simple Google analytics integration for Angular apps.
  • cloudinary - Angular SDK from Cloudinary.

Site Templates

  • 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.
  • angular-template-for-threejs - Angular Template For Three.js
  • 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.
  • 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.
  • gradient-able-free-admin-template - Gradient able free bootstrap, angular, react admin template
  • angular-ngrx-frontend - Angular NgRx powered frontend template for Symfony (or similar) backend.

Generators

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

Developer tools

  • StackBlitz - Instant Dev Environments
  • CodeSandbox - An online IDE and prototyping tool for rapid Angular development.
  • Bugfender - A cloud service to collect logs and Angular errors in Real-Time.
  • Angular Dev Tools - Angular DevTools is a Chrome extension that provides debugging and profiling capabilities for Angular applications.
  • 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)

Schematics

  • Cypress: Add Cypress to an Angular CLI application
  • Jest: Configure Angular to execute unit tests with Jest instead of Karma + Jasmine
  • Prettier: Add Prettier and a pre-commit hook for formatting staged files in an Angular application
  • Tailwind CSS: Add Tailwind CSS to an Angular application
  • Threejs: New three.js starter app

Third Party Components

Animations

  • tsparticles - A component to easily add Particles animations to your Angular application.
  • ngx-confetti-explosion - Confetti in Angular
  • angular-animations - Easy, Reusable Animation Utility library for Angular.
  • ngx-lottie - Fully customizable Angular component for rendering After Effects animations. Compatible with Angular 9+.
  • angular-animations-explorer - A resource to showcase the different animations that you could do with Angular.
  • ngx-notation-reveal - Angular component to add rough notation animation when element is visible.
  • ngx-typed2 - An Angular Typing Animation Library.

Calendars

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.

Drag/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.

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

Form Controls

Icons

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

Keyboard Mouse

Layout Components

  • @robingenz/ngx-infinite-scroll Simple Angular directive for infinite scrolling.
  • angular-fullpage Official component for fullPage.js, a fullscreen scrolling library.
  • angular-split Angular split component
  • ngx-infinite-scroll - Infinite Scroll Directive for Angular
  • egjs-infinitegrid - Arrange infinite card elements according to various layout types like masonry for Angular.
  • 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)

Loaders

Maps

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.
  • ngx-awesome-popup - Angular dialog modal framework (Confirmation box, Alert box, Toast notification and Cookie banner).
  • 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.

State Management

  • angular2-jwt - Library for sending authenticated HTTP requests and decoding JWTs
  • universal-model-angular - Store and state management for Angular
  • ng-http-caching - Cache for HTTP requests in Angular application.
  • akita - A Reactive State Management Tailored-Made for JS Applications
  • 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
  • rx-angular - RxAngular offers a toolkit for handling fully reactive apps with the main focus on runtime performance, template rendering, and developer experience.
  • 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

Tables

  • 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 here.

UI Libraries

General
  • Dev Extreme - Feature-Complete 65+ Angular Component Suite
  • Syncfusion - The Complete Angular Components Library.
  • 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
Material Based
Bootstrap Based
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.

UX Components

  • angular-shepherd - Angular 7 Service wrapping the site tour library Shepherd
  • Zoom Image Library - A little yet powerful framework agnostic headless-library to zoom image on the web
  • skyux - SKY UX components for Angular
  • ngx-ui-tour - ngx-ui-tour is a UI tour library inspired by angular-ui-tour.

Viewers

Misc Components

  • @davidlj95/ngx-meta - Set your Angular site's metadata: standard meta tags, Open Graph, Twitter Cards, JSON-LD, ... Supports SSR (and Angular Universal). Use a service. Use routes' data. Set it up in a flash! 🚀
  • ng2-adsense - Easy AdSense for Angular Applications
  • ngx-countdown - Simple, easy and performance countdown for angular
  • @ngneat/transloco - 🚀 😍 The internationalization (i18n) library for Angular
  • @tolgee/ngx - Web-based localization tool enabling users to translate directly in the Angular app they develop.
  • xng-breadcrumb - Zero config breadcrumb solutuon. A lightweight, configurable and reactive breadcrumbs for Angular 6 and beyond.
  • 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-portal Component property connection in Angular application.
  • ng-lock Angular decorator for lock a function and user interface while a task running.
  • ng-generic-pipe Generic pipe for Angular application.

JAM Stack

  • scully - Scully is a static site generator for Angular projects looking to embrace the Jamstack.

Universal Angular 2

Universal (isomorphic) javascript support for Angular 2

Universal Courses And Tutorials

Universal General Resources

Universal Seed Projects

  • universal-starter - Angular 2 Universal starter kit by @Angular-Class
  • ng-seed/universal - Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, dev/prod modes, DLLs, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer by @fulls1z3
  • angular-universal - Fast, Unopinionated, Minimalist starter kit for Angular Universal 100% powered by Angular CLI
  • angular-universal-heroku-starter - Angular 7 Universal Starter Kit with Server-Side Rendering (SSR) and easy deployment to Heroku

Angular 2 in TypeScript

TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

TypeScript General Resources

TypeScript Seed Projects

Ionic in Angular

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

Ionic General Resources
  • 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

Angular 2 in Dart

Dart is an open-source, scalable programming language, with robust libraries and runtimes, for building web, server, and mobile apps.

Dart General Resources

Angular 2 in Traceur

Traceur is a JavaScript.next-to-JavaScript-of-today compiler.

Traceur General Resources

Traceur Seed Projects

Angular 2 in ES5

An ECMAScript language that includes structured, dynamic, functional, and prototype-based features.

ES5 General Resources

ES5 Seed Projects

angular2-es5-starter-kit Angular2 ES5 Starter Kit

Meteor in Angular 2

Build Realtime Web and Mobile Apps With Angular and Meteor.

Meteor General Resources

Meteor Seed Projects

Angular 2 in NativeScript

Build truly native iOS, Android and Windows Phone apps with Javascript and CSS. Try NativeScript open-source framework for cross-platform development.

NativeScript General Resources

NativeScript Seed Projects

Angular 2 in React Native

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript.

React Native General Resources

React Native Projects

React Native Seed Projects

Angular 2 in Scala

General purpose language; multiparadigm (object-oriented, functional, concurrent elements); statically typed, type-safe; focus: Web services.

Scala General Resources

Scala Seed Projects

Angular 2 components with Bit

Bit is an open source virtual repository (code base) built to make components easily manageable and usable across applications. You can quickly export any Angular component from any context while working on any project to a bit distributed Scope. Bit's reusbale component environment cuts the overhead of configuring build and test environments for exporting every new component. The Scope is a virtual component repository which stores, organizes, manages and tests your components. Once modeled on a Scope, your components can be easily found and used in any Angular application. Components can be organized together and still modified and used individually without pulling in entire libraries.

Bit Resources

Security

  • Angular.io Security Guide - brief security guidance including Preventing cross-site scripting (XSS), Sanitization and Content security policy.
  • So you thought you were safe using AngularJS? Think again! Slides, Video - Lewis Ardern speaking at OWASP London 2017.

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(angular 2, angular 4,5+) applications(AOT, lazy modules compatible)
  • angular-auth-oidc-client - npm package for OpenID Connect, OAuth Code Flow with PKCE, Refresh tokens, Implicit Flow
  • 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 v2.
  • angular2-jwt - Helper library for handling JWTs in Angular apps
  • 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.

NgRx

enjoy — PatrickJS

License

CC0

About

:page_facing_up: A curated list of awesome Angular resources

https://patrickjs.github.io/awesome-angular/

angular2angular4awesomeangularawesome-listangular9angular10angular11angular-components

License:Creative Commons Zero v1.0 Universal

Languages

Language:HTML 74.7%Language:CSS 23.2%Language:Shell 2.1%