Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/BioPhoton/angular-star-rating

Star Rating Angular Component written in typescript, based on css only techniques.
https://github.com/BioPhoton/angular-star-rating

angular css demo keyboard reactive-forms star-rating

Last synced: 1 day ago
JSON representation

Star Rating Angular Component written in typescript, based on css only techniques.

Host: GitHub
URL: https://github.com/BioPhoton/angular-star-rating
Owner: BioPhoton
License: mit
Created: 2016-12-09T15:13:05.000Z (about 8 years ago)
Default Branch: master
Last Pushed: 2024-01-17T09:45:01.000Z (12 months ago)
Last Synced: 2025-01-01T11:04:09.875Z (7 days ago)
Topics: angular, css, demo, keyboard, reactive-forms, star-rating
Language: TypeScript
Homepage:
Size: 10.4 MB
Stars: 217
Watchers: 5
Forks: 86
Open Issues: 18
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt

Awesome Lists containing this project

fucking-awesome-angular - angular-star-rating - Star Rating Angular Component written in TypeScript, based on CSS-only techniques. (Table of contents / Third Party Components)
fucking-awesome-angular - angular-star-rating - Star Rating Angular Component written in TypeScript, based on CSS-only techniques. (Table of contents / Third Party Components)
awesome-angular - angular-star-rating - Star Rating Angular Component written in TypeScript, based on CSS-only techniques. (Table of contents / Third Party Components)

README

        # Angular Star Rating ⭐⭐⭐⭐⭐

#### ⭐ Angular Star Rating is a Angular 10+ component made with ❤, based on css only techniques. ⭐

![License](https://img.shields.io/npm/l/angular-star-rating.svg)

[![NPM Version](https://img.shields.io/npm/v/angular-star-rating.svg)](https://www.npmjs.com/package/angular-star-rating)

![Release status](https://github.com/BioPhoton/angular-star-rating/actions/workflows/release.yml/badge.svg)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

[![Package Quality](http://npm.packagequality.com/shield/angular-star-rating.svg)](http://packagequality.com/#?package=angular-star-rating)

[![NPM](https://img.shields.io/npm/dt/angular-star-rating.svg)](https://www.npmjs.com/package/angular-star-rating)

Angular Star Rating is a Angular 10+ component made with ❤.

It is based on best practice UX/UI methods, accessibility in mind and an eye for details.

In love with reactive forms, the component is easy to control over the keyboard.

It is a perfect fit for all angular projects with ⭐'s.

To keep it as flexible as possible a major part of the logic is based on [css only techniques](https://github.com/BioPhoton/css-star-rating). The component simple applies the state depending css modifiers.

![Angular-Star-Rating](https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/examples/example-usage.gif)

## Browser support

| IE | Firefox | Chrome | Safari | Opera |

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

| >11  	|  >50 	|   >55	|  >10 	|   >41	|

| 	|  |   |   |  |

## Features

Fully featured this component is provided with:

- [x] easy **configurable** and reasonable defaults

- [x] all **12 css modifiers** of the awesome [css only star rating](https://github.com/BioPhoton/css-star-rating) library

- [x] it integrates well with **reactive forms** and all it's states

- [x] focus and blur events are handled for a **smooth keyboard navigation**

- [x] it's **keyboard control** is even better than a native input once :-)

- [x] mouse enter and leave events are used to generate a nice **on hover interaction**

- [x] importable as a **angular ngModule** it is a plug and play to use

- [x] and is tested for **AOT**

## Related Projects

| Css | Angular 1 |  Angular | Ionic 1 |

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

|  |  |  |  |

| [Css Star Rating](https://github.com/BioPhoton/css-star-rating) | [Angular1 Star Rating](https://github.com/BioPhoton/angular1-star-rating) | [Angular Star Rating](https://github.com/BioPhoton/angular-star-rating) |[Ionic1 Star Rating](https://github.com/BioPhoton/ionic1-star-rating) |

## DEMO

- [x] [Stackblitz Demo](https://stackblitz.com/edit/angular-ivy-8gkvhh)

- [x] [Live Demo](https://biophoton.github.io/angular-star-rating)

- [x] [Example-App Sources](https://github.com/BioPhoton/angular-star-rating/tree/master/apps/demos/)

## [Documentation](https://github.com/BioPhoton/angular-star-rating/wiki)

- [Installing](https://github.com/BioPhoton/angular-star-rating/wiki/Installing)

- [Customizing Styles](https://github.com/BioPhoton/angular-star-rating/wiki/Customizing-Styles)

- [Property bindings](https://github.com/BioPhoton/angular-star-rating/wiki/Property-bindings)

  - [Implement property bindings](https://github.com/BioPhoton/angular-star-rating/wiki/Implement-property-bindings)

- [Event bindings](https://github.com/BioPhoton/angular-star-rating/wiki/Event-bindings)

  - [Implement event bindings](https://github.com/BioPhoton/angular-star-rating/wiki/Implement-event-bindings)

- [Use it with reactive forms](https://github.com/BioPhoton/angular-star-rating/wiki/Use-it-with-reactive-forms)

- [Custom configuration](https://github.com/BioPhoton/angular-star-rating/wiki/Custom-configuration)

## Versioning

This project will be maintained under the Semantic Versioning guidelines.

Given a version number `MAJOR`.`MINOR`.`PATCH`-`PRE-RELEASE`, increment the:

- MAJOR version when you make incompatible API changes,

- MINOR version when you add functionality in a backwards-compatible manner, and

- PATCH version when you make backwards-compatible bug fixes.

- PRE-RELEASE and build metadata as extensions to the MAJOR.MINOR.PATCH format (1.0.0-beta.0).

Find information on SemVer under [semver.org](http://semver.org).

## License

MIT © [Michael Hladky](mailto:[email protected])