{"id":17056281,"url":"https://github.com/biophoton/angular1-star-rating","last_synced_at":"2025-04-12T17:26:26.619Z","repository":{"id":57179467,"uuid":"68372869","full_name":"BioPhoton/angular1-star-rating","owner":"BioPhoton","description":"Angular 1.5 Component written in typescript, based on css only techniques.","archived":false,"fork":false,"pushed_at":"2018-02-22T12:45:43.000Z","size":5082,"stargazers_count":19,"open_issues_count":7,"forks_count":20,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T22:07:15.028Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BioPhoton.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-16T11:01:35.000Z","updated_at":"2021-07-13T10:08:41.000Z","dependencies_parsed_at":"2022-09-09T06:01:32.987Z","dependency_job_id":null,"html_url":"https://github.com/BioPhoton/angular1-star-rating","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioPhoton%2Fangular1-star-rating","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioPhoton%2Fangular1-star-rating/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioPhoton%2Fangular1-star-rating/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BioPhoton%2Fangular1-star-rating/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BioPhoton","download_url":"https://codeload.github.com/BioPhoton/angular1-star-rating/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248603638,"owners_count":21131835,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T10:23:55.595Z","updated_at":"2025-04-12T17:26:26.588Z","avatar_url":"https://github.com/BioPhoton.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular1 Star Rating ⭐⭐⭐⭐⭐\n#### ⭐ Angular 1.5 Component written in typescript, based on css only techniques. ⭐\n\n![License](https://img.shields.io/npm/l/angular1-star-rating.svg)\n![Bower Version](https://img.shields.io/bower/v/angular1-star-rating.svg)\n[![NPM Version](https://img.shields.io/npm/v/angular1-star-rating.svg)](https://www.npmjs.com/package/angular1-star-rating)  \n[![Standard Version](https://img.shields.io/badge/release-standard%20version-brightgreen.svg)](https://github.com/BioPhoton/angular1-star-rating)  \n[![Build Status](https://travis-ci.org/BioPhoton/angular1-star-rating.svg?branch=master)](https://travis-ci.org/BioPhoton/angular1-star-rating)\n[![NPM](https://img.shields.io/npm/dt/angular1-star-rating.svg)](https://www.npmjs.com/package/angular1-star-rating)  \n\n[![NPM](https://nodei.co/npm/angular1-star-rating.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://npmjs.org/angular1-star-rating)\n[![Package Quality](http://npm.packagequality.com/badge/angular1-star-rating.png)](http://packagequality.com/#?package=angular1-star-rating)  \n\nAngular1 Star Rating is a \u003e1.5 Angular component written in typescript.   \nIt is based on [css-star-rating](https://github.com/BioPhoton/css-star-rating), a fully featured and customizable css only star rating component written in scss.  \n\n![Angular1-Star-Rating](https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/example-usage.gif)\n\n## DEMO\n- [x] [Example-App](https://github.com/BioPhoton/angular1-star-rating/tree/master/examples/angular1)  \n- [x] [Example-App-Plnkr](https://run.plnkr.co/plunks/2tw2z7/)  \n\n## Related Projects\n\n| Css | Angular1 (\u003e=1.5)| Angular (\u003e=2) |\n|---  |---\t    |--- \t       |\n| \u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/dev/resources/family/css3.png\" width=\"100\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/dev/resources/family/angular1.png\" width=\"100\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/dev/resources/family/angular.png\" width=\"80\"\u003e |\n| [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) |\n\n## Features\nThis module implements all Features from [CSS-STAR-RATING](https://github.com/BioPhoton/css-star-rating).\nIt also provides callbacks for all calculation functions used in the component as well as all possible event emitters.\n\n- [x] **id** - The html id attribute of the star rating\n- [x] **rating** -  The actual Star rating\n- [x] **showHalfStars** - To display half stars or not\n- [x] **showHoverStars** - To display hover state on stars or not\n- [x] **numOfStars** - The max number of stars you can rate\n- [x] **size** - The different sizes of the component\n- [x] **space** - The space between stars\n- [x] **staticColor** - A static color for the stars\n- [x] **disabled** - Component is in disabled mode\n- [x] **starType** - Stars can be displayed as svg, character or icon-font like fontawesome, glyphicons or ionicons\n- [x] **labelText** - The value of the label text\n- [x] **labelHidden** - If the label is visible or not\n- [x] **labelPosition** - The position of the label\n- [x] **speed** - The duration of the animation\n- [x] **direction** - The direction of the component i.e. right to left\n- [x] **readOnly** - Click event is disabled\n- [x] **getColor** - Custom function to calculate the color for a rating\n- [x] **getHalfStarVisible** - Custom function to calculate value for displaying half stars or not\n- [x] **onClick** - Event emitter for onClick action\n- [x] **onRatingChange** - Event emitter for onRatingChange event\n\n## Browser support\n\n\n| IE | Firefox | Chrome | Safari | Opera |\n|--- |---\t   |--- \t|---\t |---|\n| \u003e 11  \t|  \u003e 50 \t|   \u003e 55\t|  \u003e 10 \t|   \u003e 41\t|\n| \u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/browser/ie.png\" width=\"100\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/browser/firefox.png\" width=\"100\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/browser/chrome.png\" width=\"100\"\u003e  | \u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/browser/safari.png\" width=\"100\"\u003e  | \u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/browser/opera.png\" width=\"100\"\u003e |\n\n\n## Install\n\n**Get Angular1 Star Rating:*\n - clone \u0026 build this repository\n - [download as .zip](https://github.com/BioPhoton/angular1-star-rating/releases)\n - via **[npm](https://www.npmjs.org/)**: by running `$ npm install angular1-star-rating` from your console\n - via **[bower](https://bower.io/)**: by running `$ bower install angular1-star-rating` from your console\n - via **[cdn](https://cdn.rawgit.com/BioPhoton/angular1-star-rating/v1.2.4/dist/index.js)**: by adding the git-cdn reference in your index.html  \n   ```html\n   \u003cscript src=\"https://cdn.rawgit.com/BioPhoton/angular1-star-rating/v1.2.4/dist/index.js\"\u003e\u003c/script\u003e\n   ```\n\n**Load library as minified js file**\n```html\n\u003cscript src=\"[bower or npm folder or git-cdn path]/angular1-star-rating/dist/index.js\"\u003e\u003c/script\u003e\n```\n\n**Inject it into angular**\n```javascript\nangular.module('myApp', ['star-rating'])\n```\n\n**Use it**\n```html\n\u003cstar-rating-comp rating=\"'3.0'\"\u003e\u003c/star-rating-comp\u003e\n```\n\n## Component Properties\n\n### Input (\u003c bindings)\n\n**id**: string (Optional)  \nThe html id attribute of the star rating   \nDefault: undefined\n\n```html\n\u003cstar-rating-comp id=\"'my-id'\"\u003e\u003c/star-rating-comp\u003e\n```\n\n**rating**: number (Optional)  \nThe actual star rating value  \nDefault: 0  \n\n```html\n\u003cstar-rating-comp rating=\"3\"\u003e\u003c/star-rating-comp\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-value.PNG\" width=\"290\"\u003e\n\n**showHalfStars**: boolean (Optional)\nTo show half stars or not  \nOptions: true, false  \nDefault: false\n\n```html\n\u003cstar-rating-comp show-half-stars=\"true\"\u003e\u003c/star-rating-comp\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-show_half_stars-false.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-show_half_stars-true.PNG\" width=\"290\"\u003e  \n\n**showHoverStars**: boolean (Optional)\nTo show hover state on stars or not  \nOptions: true, false  \nDefault: false\n\n```html\n\u003cstar-rating-comp show-hover-stars=\"true\"\u003e\u003c/star-rating-comp\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-show_hover_stars-false.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-show_hover_stars-true.PNG\" width=\"290\"\u003e  \n\n\n**numOfStars**: number (Optional)  \nThe possible number of stars to choose from  \nDefault: 5\n\n```html\n\u003cstar-rating-comp num-of-stars=\"6\"\u003e\u003c/star-rating-comp\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-num_of_stars.PNG\" width=\"290\"\u003e\n\n**label-text**: string (Optional)  \nThe label text next to the stars.  \nDefault: undefined  \n\n```html\n\u003cstar-rating-comp label-text=\"'My text!'\"\u003e\u003c/star-rating-comp\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-label_text.PNG\" width=\"290\"\u003e\n\n**labelPosition**: starRatingPosition (Optional)  \nThe position of the label  \nOptions: top, right, bottom, left  \nDefault: left  \n\n```html\n\u003cstar-rating-comp label-position=\"'top'\"\u003e\u003c/star-rating-comp\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-label-top.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-label-bottom.PNG\" width=\"290\"\u003e  \n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-label-right.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-label-left.PNG\" width=\"290\"\u003e\n\n**space**: starRatingStarSpace (Optional)  \nIf the start use the whole space or not. \nOptions: no, between, around\nDefault: no  \n\n```html\n\u003cstar-rating-comp space=\"'around'\"\u003e\u003c/star-rating-comp\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-space-default.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-space-around.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-space-between.PNG\" width=\"290\"\u003e\n\n**size**: starRatingSizes (Optional)  \nThe height and width of the stars.    \nOptions: small, medium, large  \nDefault: ok  \n\n```html\n\u003cstar-rating-comp size=\"'small'\"\u003e\u003c/star-rating-comp\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-size-small.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-size-medium.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-size-large.PNG\" width=\"290\"\u003e\n\n**color**: starRatingColors (Optional)  \nPossible color names for the stars.  \nOptions: default, negative, ok, positive  \nDefault: undefined  \n\n```html\n\u003cstar-rating-comp static-color=\"'positive'\"\u003e\u003c/star-rating-comp\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-color-default.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-color-positive.PNG\" width=\"290\"\u003e  \n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-color-ok.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-color-negative.PNG\" width=\"290\"\u003e\n\n**disabled**: boolean (Optional)  \nThe click callback is disabled, colors are transparent   \nDefault: false  \n\n```html\n\u003cstar-rating-comp disabled=\"true\"\u003e\u003c/star-rating-comp\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-disabled-false.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-disabled-true.PNG\" width=\"290\"\u003e\n  \n**direction**: string (Optional)  \nThe direction of the stars and label.   \nOptions: rtl, ltr  \nDefault: rtl  \n\n```html\n\u003cstar-rating-comp direction=\"'ltr'\"\u003e\u003c/star-rating-comp\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-direction-rtl.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-direction-ltr.PNG\" width=\"290\"\u003e\n  \n**readOnly**: boolean (Optional)  \nThe click callback is disabled  \nDefault: false  \n\n```html\n\u003cstar-rating-comp read-only=\"true\"\u003e\u003c/star-rating-comp\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-disabled-false.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-disabled-false.PNG\" width=\"290\"\u003e\n\n**speed**: starRatingSpeed (Optional)  \nThe duration of the animation in ms.   \nOptions: immediately, noticeable, slow  \nDefault: noticeable  \n\n```html\n\u003cstar-rating-comp speed=\"'slow'\"\u003e\u003c/star-rating-comp\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-animation_speed-immediately.gif\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-animation_speed-noticeable.gif\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-animation_speed-slow.gif\" width=\"290\"\u003e\n\n**starType**: starRatingStarTypes (Optional)  \nThe type of start resource to use.     \nOptions: svg, icon, custom-icon\nDefault: svg  \n\n```html\n\u003cstar-rating-comp star-type=\"'icon'\"\u003e\u003c/star-rating-comp\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-type-svg.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-type-icon.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-type-custom_icon.PNG\" width=\"290\"\u003e\n\n**getColor**: Function (Optional)  \nCalculation of the color by rating.  \nParams: rating, numOfStars, staticColor  \nReturn: colorName as string  \n\n```html\n\u003cstar-rating-comp get-color=\"parentCtrl.getColor(rating, numOfStars, staticColor)\"\u003e\u003c/star-rating-comp\u003e\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-get_color-function.PNG\" width=\"290\"\u003e\n\n**getHalfStarVisible**: Function (Optional)  \nCalculation for adding the \"half\" class or not, depending on the rating value.  \nParams: rating  \nReturn: boolean \n\n```html\n\u003cstar-rating-comp get-half-star-visible=\"parentCtrl.getHalfStarVisible(rating)\" rating=\"3.1\"\u003e\u003c/star-rating-comp\u003e\n```\n```javascript\nfunction getHalfStarVisible(rating) {\n    var absDiff = Math.abs(rating % 1);\n    \n    if(absDiff == 0.1) {\n        return false;\n    }\n    \n    return absDiff \u003e 0;\n}\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-get_half_star_visible-default.PNG\" width=\"290\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-get_half_star_visible-custom.PNG\" width=\"290\"\u003e\n\n### Output (\u0026 bindings)\n\n**onClick**: Function (Optional)  \nCallback function for star click event \nParams: $event\n```html\n\u003cstar-rating-comp on-click=\"parentCtrl.onClick($event)\"\u003e\u003c/star-rating-comp\u003e\n```\n```javascript\nfunction onClick($event) {\n    parent.clickCount = parent.clickCount + 1;\n}\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-on_click-counter.PNG\" width=\"290\"\u003e\n\n**onRatingChange**: Function (Optional)  \nCallback function for rating update event \nParams: $event\n```html\n\u003cstar-rating-comp on-rating-change=\"parentCtrl.onRatingChange($event)\"\u003e\u003c/star-rating-comp\u003e\n```\n```javascript\nfunction onRatingChange($event) {\n    parent.rating = $event.rating;\n}\n```\n\u003cimg src=\"https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-on_update-2waybinding.PNG\" width=\"290\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiophoton%2Fangular1-star-rating","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbiophoton%2Fangular1-star-rating","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiophoton%2Fangular1-star-rating/lists"}