Convert Figma logo to code with AI

brillout logoawesome-angular-components

Catalog of Angular 2+ Components & Libraries

3,236
408
3,236
19
View on GitHub

Top Related Projects

angular's avatar

components

24,317

Component infrastructure and Material Design components for Angular

primefaces's avatar

primeng

10,152

The Most Complete Angular UI Component Library

ng-bootstrap's avatar

ng-bootstrap

8,207

Angular powered Bootstrap

akveo's avatar

nebular

8,046

:boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode

vmware-archive's avatar

clarity

6,431

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.

valor-software's avatar

ngx-bootstrap

5,523

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)

Quick Overview

The brillout/awesome-angular-components repository is a curated list of Angular components, libraries, and resources. It serves as a comprehensive collection of useful tools and components for Angular developers, making it easier to find and integrate high-quality solutions into Angular projects.

Pros

  • Extensive collection of Angular components and libraries
  • Well-organized and categorized for easy navigation
  • Regularly updated with new contributions from the community
  • Includes both official and third-party resources

Cons

  • May include outdated or deprecated components
  • Quality of listed components can vary
  • Requires manual evaluation of each component for specific project needs
  • Some links may become broken over time

Getting Started

As this is not a code library but a curated list of resources, there's no specific code to get started. However, you can use the repository as follows:

  1. Visit the GitHub repository: https://github.com/brillout/awesome-angular-components
  2. Browse through the categories to find components or libraries you need
  3. Click on the links to explore individual projects
  4. Follow the installation and usage instructions provided by each specific component or library

Remember to check the compatibility of the chosen components with your Angular version and project requirements before integrating them into your application.

Competitor Comparisons

angular logo

components

24,317

Component infrastructure and Material Design components for Angular

Pros of Angular Components

  • Official Angular component library maintained by the Angular team
  • Comprehensive set of high-quality, well-tested components
  • Seamless integration with Angular framework and ecosystem

Cons of Angular Components

  • Limited to Angular-specific components
  • May have a steeper learning curve for beginners
  • Less flexibility for customization compared to third-party options

Code Comparison

Angular Components:

import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [MatButtonModule],
  // ...
})
export class AppModule { }

Awesome Angular Components:

// No specific code example, as it's a curated list of various components
// Usage depends on the selected component library

Summary

Angular Components is the official component library for Angular, offering a robust set of UI elements with seamless integration. Awesome Angular Components, on the other hand, is a curated list of various third-party component libraries and individual components.

While Angular Components provides a consistent and well-maintained set of components, Awesome Angular Components offers more variety and potentially more specialized solutions. The choice between them depends on project requirements, desired flexibility, and the level of integration needed with the Angular ecosystem.

primefaces logo

primeng

10,152

The Most Complete Angular UI Component Library

Pros of PrimeNG

  • Comprehensive UI component library with 80+ components
  • Consistent design and theming across all components
  • Active development and regular updates

Cons of PrimeNG

  • Steeper learning curve due to its extensive API
  • Larger bundle size compared to individual components
  • May include unnecessary components for simpler projects

Code Comparison

PrimeNG example:

import { ButtonModule } from 'primeng/button';

@NgModule({
  imports: [ButtonModule],
  // ...
})
export class AppModule { }

Awesome Angular Components approach:

import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [MatButtonModule],
  // ...
})
export class AppModule { }

Key Differences

  • Awesome Angular Components is a curated list of various Angular component libraries, while PrimeNG is a single, comprehensive UI component library
  • Awesome Angular Components allows developers to choose specific components from different libraries, offering more flexibility
  • PrimeNG provides a consistent look and feel across all components, which may be preferable for larger applications

Use Cases

  • PrimeNG: Ideal for large-scale applications requiring a consistent UI and extensive component set
  • Awesome Angular Components: Better suited for projects needing specific components or wanting to mix and match from different libraries

Community and Support

  • PrimeNG has a dedicated support team and active community
  • Awesome Angular Components relies on the individual support of each listed library
ng-bootstrap logo

ng-bootstrap

8,207

Angular powered Bootstrap

Pros of ng-bootstrap

  • Comprehensive set of Angular-specific Bootstrap components
  • Official Angular implementation of Bootstrap
  • Regular updates and maintenance

Cons of ng-bootstrap

  • Limited to Bootstrap-style components
  • Steeper learning curve for those unfamiliar with Bootstrap

Code Comparison

ng-bootstrap:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [NgbModule],
  // ...
})
export class AppModule { }

awesome-angular-components:

// No specific code example, as it's a curated list of components
// Users would import and use individual components as needed

Key Differences

  • awesome-angular-components is a curated list of various Angular components from different sources, while ng-bootstrap is a single library focused on Bootstrap components
  • ng-bootstrap provides a cohesive set of components with consistent styling, whereas awesome-angular-components offers a wider variety of component styles and functionalities
  • awesome-angular-components allows for more flexibility in choosing specific components, while ng-bootstrap is better suited for projects that want to fully adopt the Bootstrap design system

Use Cases

  • Choose ng-bootstrap for projects that require a complete Bootstrap implementation in Angular
  • Opt for awesome-angular-components when looking for a diverse range of component options or specific functionality not covered by Bootstrap
akveo logo

nebular

8,046

:boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode

Pros of Nebular

  • Comprehensive UI kit with a wide range of pre-built components
  • Customizable themes and styles for consistent design
  • Active development and regular updates

Cons of Nebular

  • Steeper learning curve due to its extensive feature set
  • Potentially larger bundle size compared to individual components
  • May require more setup and configuration

Code Comparison

Nebular component usage:

import { NbButtonModule } from '@nebular/theme';

@NgModule({
  imports: [NbButtonModule],
})
export class MyModule { }

Awesome Angular Components approach (using a specific component):

import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [MatButtonModule],
})
export class MyModule { }

Summary

Nebular is a comprehensive UI kit offering a wide range of components and theming options, while Awesome Angular Components is a curated list of individual component libraries. Nebular provides a more cohesive ecosystem but may have a steeper learning curve and larger bundle size. Awesome Angular Components allows for more flexibility in choosing specific components from different libraries but may require more effort to maintain consistency across the application.

Both approaches have their merits, and the choice depends on project requirements, team expertise, and desired level of customization. Nebular is better suited for projects requiring a complete UI solution, while Awesome Angular Components is ideal for developers who want to cherry-pick components from various sources.

vmware-archive logo

clarity

6,431

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.

Pros of Clarity

  • Comprehensive UI component library with a consistent design system
  • Actively maintained by VMware with regular updates and support
  • Includes accessibility features and follows web standards

Cons of Clarity

  • Larger bundle size due to its comprehensive nature
  • Steeper learning curve for developers new to the framework
  • Less flexibility for customization compared to individual components

Code Comparison

Clarity (Angular component usage):

<clr-dropdown>
  <button clrDropdownTrigger>Dropdown</button>
  <clr-dropdown-menu>
    <a clrDropdownItem>Action 1</a>
    <a clrDropdownItem>Action 2</a>
  </clr-dropdown-menu>
</clr-dropdown>

Awesome Angular Components (example from ng-select):

<ng-select [items]="cities"
           bindLabel="name"
           bindValue="id"
           [(ngModel)]="selectedCityId">
</ng-select>

Summary

Clarity offers a complete UI framework with consistent design and active maintenance, while Awesome Angular Components provides a curated list of individual components offering more flexibility. Clarity may be better suited for large-scale applications requiring a unified design system, whereas Awesome Angular Components allows developers to cherry-pick specific components for their needs.

valor-software logo

ngx-bootstrap

5,523

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)

Pros of ngx-bootstrap

  • Comprehensive set of Bootstrap components specifically designed for Angular
  • Actively maintained with regular updates and bug fixes
  • Extensive documentation and examples for each component

Cons of ngx-bootstrap

  • Limited to Bootstrap-style components, less variety compared to awesome-angular-components
  • May have a steeper learning curve for developers not familiar with Bootstrap

Code Comparison

awesome-angular-components:

# Awesome Angular Components

A curated list of awesome Angular components, libraries, and resources.

## UI Components
- [ng-bootstrap](https://github.com/ng-bootstrap/ng-bootstrap) - Angular powered Bootstrap
- [ngx-bootstrap](https://github.com/valor-software/ngx-bootstrap) - Native Angular directives for Bootstrap

ngx-bootstrap:

import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';

@NgModule({
  imports: [BsDatepickerModule.forRoot()]
})
export class AppModule(){}

Summary

awesome-angular-components is a curated list of various Angular components and libraries, offering a wide range of options for developers. It serves as a comprehensive resource for finding different Angular-related tools and components.

ngx-bootstrap, on the other hand, is a specific library that provides Angular implementations of Bootstrap components. It offers a more focused set of components but with deeper integration and support for Angular applications using Bootstrap.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Angular 2+ Components & Libraries


Contents





UI Components

Overlay

Overlay / modal / alert / dialog / lightbox / popup

Notification

Toaster / snackbar — Notify the user with a modeless temporary little popup

  • angular2-toaster - Angular2-toaster is an asynchronous, non-blocking Angular2 Toaster Notification library.
  • ng2-toasty - Angular2 Toasty component shows growl-style alerts and messages for your app.
  • ng2-notifications - Angular 2 Component for Native Push Notifications.
  • ngx-toastr - Angular 2 toastr.
  • @ngrx/notify - Web Notifications Powered by RxJS for Angular.
  • angular2-notifications - A light and easy to use notifications library for Angular 2. It features both regular page notifications (toasts) and push notifications.
  • angular-notifier - A well designed, fully animated, highly customizable, and easy-to-use notification library for your Angular 2+ application.
  • ng2-toastr - Bootstrap style toast for modern angular (v2.0.0 and above).
Popover

Show a little dialog next to an element

Table

Table / Data Grid — Display (large) datasets

Tree

Visualize data as a tree

  • angular2-tree-component - A simple yet powerful tree component for Angular2.
  • ng2-tree - Angular2 component for visualizing data that can be naturally represented as a tree.
Loading / Progress Indicators

Let the user know that something is being loaded

Menu

Menu / sidebar

Charts
Map
List Virtualization
Infinite Scroll
Parallax

Parallax effect while scrolling

Scrollbar

Replace the browser scrollbar with a custom one

Carousel

Carousel / touch slider / swiper

Sticky

Implementations similar to position: sticky

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

Display time / date / age

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

Form

Let the user create & edit data

Date Picker

Time Picker / Datetime Picker

Color Picker
Slider

Let the user choose a value from a given range

Select

Let the user choose from a list of options

  • ng2-select - Angular2 based replacement for select boxes.
  • angular2-select - A native angular 2 select component (based on select2).
Autocomplete

Autosuggest / autocomplete / typeahead

Type Select

Let the user select a tag / something while typing

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

Let the user define an order on a list

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

Show & edit events in a calendar view

Image Editing

Image manipulation

UI Layout

Layout the overall / main view

  • angular2-grid - A grid-based drag/drop/resize directive plugin for Angular 2.
  • ng2-fullpage - Angular 2 fullpage scrolling.
  • angular-split - Angular (2+) UI library to split views.
  • ngresizable - Simple, tree-shakable, AoT, Universal and Web Worker friendly resizable component for Angular
Responsive

UI Frameworks

Responsive

Set of components + responsive layout system

Component Collections

Set of components without layout system

  • @angular/material - Official Material Design components for Angular.
  • primeng - UI Components for Angular 2.
  • ng-lightning - Native Angular 2 components & directives for Lightning Design System.
  • angular2-mdl - Angular 2 components, directives and styles based on material design lite.
  • fuel-ui - UI Components for use with Angular2 and Bootstrap4.
  • igniteui-angular2 - Ignite UI directives for Angular 2.
  • md2 - Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Collapse, Colorpicker, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Tabs, Tags(Chips), Toast and Tooltip.
  • igniteui-js-blocks - Mobile-first Angular native components.
  • devextreme-angular - Angular 2 UI and visualization components based on DevExtreme widgets.
  • ng-zorro-antd - An enterprise-class UI components based on Ant Design and Angular.

Mobile

  • ionic2 - Build amazing native and progressive web apps with Angular and open web technologies. One app running on everything.
  • angular2-onsenui - Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Admin panel

Admin panels / dashboard

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

Isomorphic Apps

Server-side rendering

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

Code Structure

Improve overall design of the source code

Data Management

Data flow / data store / data flow

Communication with Server

Code Style

Improve readability of the source code

  • codelyzer - Linting for Angular projects.
  • babel-plugin-angular2-annotations - A babel transformer plugin for Angular 2 annotations.
  • redux-decorators - A ridiculously good syntax for working with Redux using decorators in ES7 / TypeScript. Currently limited to Angular 2 but could potentially be used elsewhere.
  • angular-tslint-rules - Shared TSLint & codelyzer rules to enforce a consistent code style for Angular development.

Utilities

Pipes
  • angular-pipes - Useful pipes for Angular.
  • ngx-pipes - Useful pipes for Angular 2 and beyond with no external dependencies.
  • ng-pipes - Bunch of useful pipes for Angular2 (with no external dependencies!).
  • angular2-linky - Linky pipe for angular2.
Form

Utilities to help create HTML forms

Animations
  • ng-animate - 🌙 A collection of cool, reusable and flexible animations for Angular 4.2+
API

Utilities to consume APIs

Authentication
  • ng2-ui-auth - An angular2 repository for authentication based on angular1's satellizer.
  • angular2-token - Token based authentication service for Angular2 (ng2) with multi-user support. Works best with the devise token auth gem for Rails.
  • angular-oauth2-oidc - Support for OAuth 2 and OpenId Connect (OIDC) in Angular.
  • angular-oauth2 - AngularJS OAuth2.
  • @ngx-auth/core - Authentication utility for Angular.
Event Handling
  • ng-click-outside - Angular 2+ directive for handling click events outside of an element.
Scroll
Responsive Design
  • ng2-responsive - Superset of RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen and another features in Angular 2.
Persistence
  • angular2-localstorage - Angular2 decorator to save and restore variables/class properties to HTML5 LocalStorage automatically.
  • ng2-webstorage - Localstorage and sessionstorage manager - angular2 service.
  • angular-safeguard - Wrapper around cookies/sessionStorage/localStorage for angular2. If all are unavailable will use an in memory storage.
  • @ngx-cache/core - Cache utility for Angular.
Cookie

Cookie manipulation

  • angular2-cookie - Implementation of Angular 1.x $cookies service to Angular 2.
Routing
  • ng2-breadcrumb - This is an angular 2 component that creates a breadcrumb trail. It hooks into the angular2/router, to dynamically build up the crumb trail once a component is routed to.
  • ng2-page-transition - Simple Angular2 component to create a page transition animation on route changes.
  • @ngx-i18n-router/core - Route internationalization utility for Angular.
Pagination
Validation
i18n

Internationalization / L10n / localization / translation

Logging
Asset management

Utilities for building / bundling / loading assets

Meta Tags

Set meta tags, , children of <head>

  • ng2-meta - Dynamic meta tags and SEO in Angular2.
  • @ngx-meta/core - Dynamic page title & meta tags utility for Angular (w/server-side rendering).
Clipboard

Copy & paste text to clipboard

Angular 1 -> Angular 2 Migration
  • ng-metadata - Angular 2 decorators and utils for Angular 1.x.
  • angular2-now - Angular 2 @Component syntax for Angular 1 apps.
Documentation
  • compodoc - The missing documentation tool for your Angular application.
IoT

Internet of Things

Product Tour

Performance

Reduce amount of time the user has to wait in order to interact with the app

Lazy Load

Integrations

Integrate with services or other frameworks

Dev Tools

  • @compodoc/ngd-cli - View the dependencies tree of you Angular2 application.
  • angular-playground - A drop in app module for working on Angular components in isolation (Angular version 2.x and above).
  • @ngrx/store-devtools - Developer Tools for @ngrx/store.
  • angular2-prettyjson - Angular 2 debug output of objects. Contains a pipe similar to JsonPipe but adds support for spacing and handling of circular structures.
  • Augury - Angular 2 development tools for Chrome.
  • angular-webpack-config - Shared Webpack config for Angular development.

Starter Kit

Boilerplate / scaffold / Yeoman generator / stack ensemble / seed

  • @angular/cli - Official CLI tool for Angular.
  • test-angular-seed-project - A simple starter Angular2 project.
  • poke-try-harder - Extensible Angular 2 Starter using TypeScript (Updated to 2.4.3).
  • generator-ng-fullstack - Client, server or fullstack - it's up to you. ng-fullstack gives you the best of the latest: Node, Go, http/2, Angular 1, Angular 2, Express, MongoDB, Gulp, Babel, Typescript and much more.
  • generator-angular2 - A Yeoman Generator to create Angular2 apps right now.
  • generator-ng2-webpack - An opinionated tool for scaffolding an app using angular2 and webpack.
  • generator-modern-web-dev - A Yeoman generator for Modern Web development projects.
  • generator-gulp-angular2 - Yeoman generator for Angular2 + Gulp, base on angular2-seed and generator-gulp-angular.
  • asaf-test - Get started building an Angular library quickly.
  • @manekinekko/angular-library-starter - A Minimalist Starter for Angular (v2+) libraries (w/ AOT support).
  • angular2-webpack-starter - An Angular Starter kit featuring Angular 2 and Angular 4 (Router, Http, Forms, Services, Tests, E2E, Dev/Prod, HMR, Async/Lazy Routes, AoT via ngc), Karma, Protractor, Jasmine, Istanbul, TypeScript 2, TsLint, Codelyzer, Hot Module Replacement, @types, and Webpack 2 by @AngularClass.
  • angular2-universal-starter - Enjoy Server Side rendering and Web Workers in your Angular2 Application.
  • angular-seed - Extensible, reliable and modular starter project for Angular 2 (and beyond) with statically typed build and AoT compilation.
  • clarity-seed - This is a repository for a seed project that includes Clarity Design System's dependencies.
  • Angular 2 Webpack - A complete, yet simple, starter for Angular 2 using webpack
  • Colmena CMS - Free and Open Source API and Admin powered by LoopBack and Angular.
  • @ng-seed/universal - Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Material Design & Flexbox, Webpack, dev/prod modes, DLLs, AoT compilation, HMR, SCSS compilation, lazy loading, @ngrx/store, config, cache, i18n, SEO, angulartics2 and TSLint/codelyzer.