Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/DSI-HUG/ngx-components

🚀 Useful components and utility functions for Angular
https://github.com/DSI-HUG/ngx-components
angular components material material-design
Last synced: 2 days ago
JSON representation
🚀 Useful components and utility functions for Angular
Host: GitHub
URL: https://github.com/DSI-HUG/ngx-components
Owner: DSI-HUG
License: gpl-3.0
Created: 2024-03-04T12:30:35.000Z (11 months ago)
Default Branch: main
Last Pushed: 2024-10-15T12:36:42.000Z (3 months ago)
Last Synced: 2025-01-17T07:03:28.867Z (10 days ago)
Topics: angular, components, material, material-design
Language: TypeScript
Homepage:
Size: 15.7 MB
Stars: 2
Watchers: 4
Forks: 1
Open Issues: 2
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project

awesome-angular - ngx-components - Useful components and utility functions for Angular. (Table of contents / Third Party Components)
fucking-awesome-angular - ngx-components - Useful components and utility functions for Angular. (Table of contents / Third Party Components)
README

        




    


    

        

    

    



    Useful components and utility functions for Angular

    







    

        

    

        

    

        





Package | Version | Downloads | Tests

--- | --- | --- | ---

[@hug/ngx-core](/projects/core) | [![npm version][npm-logo-core]][npm-core] | [![npm downloads][npm-dl-logo-core]][npm-dl-core] | [![build status][tests-logo-core]][tests-core]

[@hug/ngx-layout](/projects/layout) | [![npm version][npm-logo-layout]][npm-layout] | [![npm downloads][npm-dl-logo-layout]][npm-dl-layout] | [![build status][tests-logo-layout]][tests-layout]

[@hug/ngx-list-loader](/projects/list-loader) | [![npm version][npm-logo-list-loader]][npm-list-loader] | [![npm downloads][npm-dl-logo-list-loader]][npm-dl-list-loader] | [![build status][tests-logo-list-loader]][tests-list-loader]

[@hug/ngx-message-box](/projects/message-box) | [![npm version][npm-logo-message-box]][npm-message-box] | [![npm downloads][npm-dl-logo-message-box]][npm-dl-message-box] | [![build status][tests-logo-message-box]][tests-message-box]

[@hug/ngx-message-box-dialog](/projects/message-box-dialog) | [![npm version][npm-logo-message-box-dialog]][npm-message-box-dialog] | [![npm downloads][npm-dl-logo-message-box-dialog]][npm-dl-message-box-dialog] | [![build status][tests-logo-message-box-dialog]][tests-message-box-dialog]

[@hug/ngx-numeric-stepper](/projects/numeric-stepper) | [![npm version][npm-logo-numeric-stepper]][npm-numeric-stepper] | [![npm downloads][npm-dl-logo-numeric-stepper]][npm-dl-numeric-stepper] | [![build status][tests-logo-numeric-stepper]][tests-numeric-stepper]

[@hug/ngx-overlay](/projects/overlay) | [![npm version][npm-logo-overlay]][npm-overlay] | [![npm downloads][npm-dl-logo-overlay]][npm-dl-overlay] | [![build status][tests-logo-overlay]][tests-overlay]

[@hug/ngx-search-container](/projects/search-container) | [![npm version][npm-logo-search-container]][npm-search-container] | [![npm downloads][npm-dl-logo-search-container]][npm-dl-search-container] | [![build status][tests-logo-search-container]][tests-search-container]

[@hug/ngx-sidenav](/projects/sidenav) | [![npm version][npm-logo-sidenav]][npm-sidenav] | [![npm downloads][npm-dl-logo-sidenav]][npm-dl-sidenav] | [![build status][tests-logo-sidenav]][tests-sidenav]

[@hug/ngx-snackbar](/projects/snackbar) | [![npm version][npm-logo-snackbar]][npm-snackbar] | [![npm downloads][npm-dl-logo-snackbar]][npm-dl-snackbar] | [![build status][tests-logo-snackbar]][tests-snackbar]

[@hug/ngx-splitter](/projects/splitter) | [![npm version][npm-logo-splitter]][npm-splitter] | [![npm downloads][npm-dl-logo-splitter]][npm-dl-splitter] | [![build status][tests-logo-splitter]][tests-splitter]

[@hug/ngx-status](/projects/status) | [![npm version][npm-logo-status]][npm-status] | [![npm downloads][npm-dl-logo-status]][npm-dl-status] | [![build status][tests-logo-status]][tests-status]

[@hug/ngx-time-picker](/projects/time-picker) | [![npm version][npm-logo-time-picker]][npm-time-picker] | [![npm downloads][npm-dl-logo-time-picker]][npm-dl-time-picker] | [![build status][tests-logo-time-picker]][tests-time-picker]

[@hug/ngx-tooltip](/projects/tooltip) | [![npm version][npm-logo-tooltip]][npm-tooltip] | [![npm downloads][npm-dl-logo-tooltip]][npm-dl-tooltip] | [![build status][tests-logo-tooltip]][tests-tooltip]

[@hug/ngx-user-card](/projects/user-card) | [![npm version][npm-logo-user-card]][npm-user-card] | [![npm downloads][npm-dl-logo-user-card]][npm-dl-user-card] | [![build status][tests-logo-user-card]][tests-user-card]

[@hug/ngx-user-tooltip](/projects/user-tooltip) | [![npm version][npm-logo-user-tooltip]][npm-user-tooltip] | [![npm downloads][npm-dl-logo-user-tooltip]][npm-dl-user-tooltip] | [![build status][tests-logo-user-tooltip]][tests-user-tooltip]

[@hug/ngx-date-picker](/projects/date-picker) | [![npm version][npm-logo-date-picker]][npm-date-picker] | [![npm downloads][npm-dl-logo-date-picker]][npm-dl-date-picker] | [![build status][tests-logo-date-picker]][tests-date-picker]





## Getting started

This library provide a large set of components and utilities that can be used while developing for Angular.

👉 Learn about it on the 📚 [Storybook][story-book].

#### > Versioning

- `Angular >= 14 < 18` : use version `v1.x` of any package

- `Angular >= 18 < 19` : use version `v2.x` of any package

## Development

See the [developer docs][developer].

## Contributing

#### > Want to Help?

Want to file a bug, contribute some code or improve documentation? Excellent!

But please read up first on the guidelines for [contributing][contributing], and learn about submission process, coding rules and more.

#### > Code of Conduct

Please read and follow the [Code of Conduct][codeofconduct], and help us keep this project open and inclusive.

## Credits

Copyright (C) 2024 [HUG - Hôpitaux Universitaires Genève][dsi-hug]

[![love@hug](https://img.shields.io/badge/@hug-%E2%9D%A4%EF%B8%8Flove-magenta)][dsi-hug]

[license]: https://github.com/dsi-hug/ngx-components/blob/main/LICENSE

[developer]: https://github.com/dsi-hug/ngx-components/blob/main/DEVELOPER.md

[story-book]: https://dsi-hug.github.io/ngx-components

[contributing]: https://github.com/dsi-hug/ngx-components/blob/main/CONTRIBUTING.md

[codeofconduct]: https://github.com/dsi-hug/ngx-components/blob/main/CODE_OF_CONDUCT.md

[dsi-hug]: https://github.com/dsi-hug

[npm-core]: https://www.npmjs.com/package/@hug/ngx-core

[npm-logo-core]: https://img.shields.io/npm/v/@hug/ngx-core.svg?color=blue&logo=npm

[npm-dl-core]: https://npmcharts.com/compare/@hug/ngx-core?minimal=true

[npm-dl-logo-core]: https://img.shields.io/npm/dw/@hug/ngx-core.svg?color=7986CB&logo=npm&label=npm

[tests-core]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_core.yml

[tests-logo-core]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_core.yml/badge.svg

[npm-date-picker]: https://www.npmjs.com/package/@hug/ngx-date-picker

[npm-logo-date-picker]: https://img.shields.io/npm/v/@hug/ngx-date-picker.svg?color=blue&logo=npm

[npm-dl-date-picker]: https://npmcharts.com/compare/@hug/ngx-date-picker?minimal=true

[npm-dl-logo-date-picker]: https://img.shields.io/npm/dw/@hug/ngx-date-picker.svg?color=7986CB&logo=npm&label=npm

[tests-date-picker]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_date-picker.yml

[tests-logo-date-picker]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_date-picker.yml/badge.svg

[npm-layout]: https://www.npmjs.com/package/@hug/ngx-layout

[npm-logo-layout]: https://img.shields.io/npm/v/@hug/ngx-layout.svg?color=blue&logo=npm

[npm-dl-layout]: https://npmcharts.com/compare/@hug/ngx-layout?minimal=true

[npm-dl-logo-layout]: https://img.shields.io/npm/dw/@hug/ngx-layout.svg?color=7986CB&logo=npm&label=npm

[tests-layout]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_layout.yml

[tests-logo-layout]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_layout.yml/badge.svg

[npm-list-loader]: https://www.npmjs.com/package/@hug/ngx-list-loader

[npm-logo-list-loader]: https://img.shields.io/npm/v/@hug/ngx-list-loader.svg?color=blue&logo=npm

[npm-dl-list-loader]: https://npmcharts.com/compare/@hug/ngx-list-loader?minimal=true

[npm-dl-logo-list-loader]: https://img.shields.io/npm/dw/@hug/ngx-list-loader.svg?color=7986CB&logo=npm&label=npm

[tests-list-loader]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_list-loader.yml

[tests-logo-list-loader]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_list-loader.yml/badge.svg

[npm-message-box]: https://www.npmjs.com/package/@hug/ngx-message-box

[npm-logo-message-box]: https://img.shields.io/npm/v/@hug/ngx-message-box.svg?color=blue&logo=npm

[npm-dl-message-box]: https://npmcharts.com/compare/@hug/ngx-message-box?minimal=true

[npm-dl-logo-message-box]: https://img.shields.io/npm/dw/@hug/ngx-message-box.svg?color=7986CB&logo=npm&label=npm

[tests-message-box]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_message-box.yml

[tests-logo-message-box]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_message-box.yml/badge.svg

[npm-message-box-dialog]: https://www.npmjs.com/package/@hug/ngx-message-box-dialog

[npm-logo-message-box-dialog]: https://img.shields.io/npm/v/@hug/ngx-message-box-dialog.svg?color=blue&logo=npm

[npm-dl-message-box-dialog]: https://npmcharts.com/compare/@hug/ngx-message-box-dialog?minimal=true

[npm-dl-logo-message-box-dialog]: https://img.shields.io/npm/dw/@hug/ngx-message-box-dialog.svg?color=7986CB&logo=npm&label=npm

[tests-message-box-dialog]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_message-box-dialog.yml

[tests-logo-message-box-dialog]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_message-box-dialog.yml/badge.svg

[npm-numeric-stepper]: https://www.npmjs.com/package/@hug/ngx-numeric-stepper

[npm-logo-numeric-stepper]: https://img.shields.io/npm/v/@hug/ngx-numeric-stepper.svg?color=blue&logo=npm

[npm-dl-numeric-stepper]: https://npmcharts.com/compare/@hug/ngx-numeric-stepper?minimal=true

[npm-dl-logo-numeric-stepper]: https://img.shields.io/npm/dw/@hug/ngx-numeric-stepper.svg?color=7986CB&logo=npm&label=npm

[tests-numeric-stepper]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_numeric-stepper.yml

[tests-logo-numeric-stepper]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_numeric-stepper.yml/badge.svg

[npm-overlay]: https://www.npmjs.com/package/@hug/ngx-overlay

[npm-logo-overlay]: https://img.shields.io/npm/v/@hug/ngx-overlay.svg?color=blue&logo=npm

[npm-dl-overlay]: https://npmcharts.com/compare/@hug/ngx-overlay?minimal=true

[npm-dl-logo-overlay]: https://img.shields.io/npm/dw/@hug/ngx-overlay.svg?color=7986CB&logo=npm&label=npm

[tests-overlay]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_overlay.yml

[tests-logo-overlay]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_overlay.yml/badge.svg

[npm-search-container]: https://www.npmjs.com/package/@hug/ngx-search-container

[npm-logo-search-container]: https://img.shields.io/npm/v/@hug/ngx-search-container.svg?color=blue&logo=npm

[npm-dl-search-container]: https://npmcharts.com/compare/@hug/ngx-search-container?minimal=true

[npm-dl-logo-search-container]: https://img.shields.io/npm/dw/@hug/ngx-search-container.svg?color=7986CB&logo=npm&label=npm

[tests-search-container]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_search-container.yml

[tests-logo-search-container]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_search-container.yml/badge.svg

[npm-sidenav]: https://www.npmjs.com/package/@hug/ngx-sidenav

[npm-logo-sidenav]: https://img.shields.io/npm/v/@hug/ngx-sidenav.svg?color=blue&logo=npm

[npm-dl-sidenav]: https://npmcharts.com/compare/@hug/ngx-sidenav?minimal=true

[npm-dl-logo-sidenav]: https://img.shields.io/npm/dw/@hug/ngx-sidenav.svg?color=7986CB&logo=npm&label=npm

[tests-sidenav]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_sidenav.yml

[tests-logo-sidenav]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_sidenav.yml/badge.svg

[npm-snackbar]: https://www.npmjs.com/package/@hug/ngx-snackbar

[npm-logo-snackbar]: https://img.shields.io/npm/v/@hug/ngx-snackbar.svg?color=blue&logo=npm

[npm-dl-snackbar]: https://npmcharts.com/compare/@hug/ngx-snackbar?minimal=true

[npm-dl-logo-snackbar]: https://img.shields.io/npm/dw/@hug/ngx-snackbar.svg?color=7986CB&logo=npm&label=npm

[tests-snackbar]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_snackbar.yml

[tests-logo-snackbar]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_snackbar.yml/badge.svg

[npm-splitter]: https://www.npmjs.com/package/@hug/ngx-splitter

[npm-logo-splitter]: https://img.shields.io/npm/v/@hug/ngx-splitter.svg?color=blue&logo=npm

[npm-dl-splitter]: https://npmcharts.com/compare/@hug/ngx-splitter?minimal=true

[npm-dl-logo-splitter]: https://img.shields.io/npm/dw/@hug/ngx-splitter.svg?color=7986CB&logo=npm&label=npm

[tests-splitter]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_splitter.yml

[tests-logo-splitter]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_splitter.yml/badge.svg

[npm-status]: https://www.npmjs.com/package/@hug/ngx-status

[npm-logo-status]: https://img.shields.io/npm/v/@hug/ngx-status.svg?color=blue&logo=npm

[npm-dl-status]: https://npmcharts.com/compare/@hug/ngx-status?minimal=true

[npm-dl-logo-status]: https://img.shields.io/npm/dw/@hug/ngx-status.svg?color=7986CB&logo=npm&label=npm

[tests-status]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_status.yml

[tests-logo-status]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_status.yml/badge.svg

[npm-time-picker]: https://www.npmjs.com/package/@hug/ngx-time-picker

[npm-logo-time-picker]: https://img.shields.io/npm/v/@hug/ngx-time-picker.svg?color=blue&logo=npm

[npm-dl-time-picker]: https://npmcharts.com/compare/@hug/ngx-time-picker?minimal=true

[npm-dl-logo-time-picker]: https://img.shields.io/npm/dw/@hug/ngx-time-picker.svg?color=7986CB&logo=npm&label=npm

[tests-time-picker]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_time-picker.yml

[tests-logo-time-picker]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_time-picker.yml/badge.svg

[npm-tooltip]: https://www.npmjs.com/package/@hug/ngx-tooltip

[npm-logo-tooltip]: https://img.shields.io/npm/v/@hug/ngx-tooltip.svg?color=blue&logo=npm

[npm-dl-tooltip]: https://npmcharts.com/compare/@hug/ngx-tooltip?minimal=true

[npm-dl-logo-tooltip]: https://img.shields.io/npm/dw/@hug/ngx-tooltip.svg?color=7986CB&logo=npm&label=npm

[tests-tooltip]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_tooltip.yml

[tests-logo-tooltip]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_tooltip.yml/badge.svg

[npm-user-card]: https://www.npmjs.com/package/@hug/ngx-user-card

[npm-logo-user-card]: https://img.shields.io/npm/v/@hug/ngx-user-card.svg?color=blue&logo=npm

[npm-dl-user-card]: https://npmcharts.com/compare/@hug/ngx-user-card?minimal=true

[npm-dl-logo-user-card]: https://img.shields.io/npm/dw/@hug/ngx-user-card.svg?color=7986CB&logo=npm&label=npm

[tests-user-card]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_user-card.yml

[tests-logo-user-card]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_user-card.yml/badge.svg

[npm-user-tooltip]: https://www.npmjs.com/package/@hug/ngx-user-tooltip

[npm-logo-user-tooltip]: https://img.shields.io/npm/v/@hug/ngx-user-tooltip.svg?color=blue&logo=npm

[npm-dl-user-tooltip]: https://npmcharts.com/compare/@hug/ngx-user-tooltip?minimal=true

[npm-dl-logo-user-tooltip]: https://img.shields.io/npm/dw/@hug/ngx-user-tooltip.svg?color=7986CB&logo=npm&label=npm

[tests-user-tooltip]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_user-tooltip.yml

[tests-logo-user-tooltip]: https://github.com/dsi-hug/ngx-components/actions/workflows/ci_test_user-tooltip.yml/badge.svg