Angular & CSS Based Star Rating Component

Author: BioPhoton
Publish Date:
Official Page: Go to website
Views Total: 25
License: MIT


Angular Star Rating is an Angular component written in typescript, based on css only techniques.


  • id – The html id attribute of the star rating
  • rating – The actual Star rating
  • showHalfStars – To display half stars or not
  • numOfStars – The max number of stars you can rate
  • size – The different sizes of the component
  • spread – Stars are spreaded over whole width or not
  • color – A static color for the stars
  • disabled – Component is in disabled mode
  • starType – Stars can be displayed as svg, character or icon-font like fontawesome, glyphicons or ionicons
  • text – The value of the label text
  • labelPosition – The position of the label
  • speed – The duration of the animation
  • direction – The direction of the component i.e. right to left
  • readOnly – Click event is disabled
  • getColor – Custom function to calculate the color for a rating
  • getHalfStarVisible – Custom function to calculate value for displaying half stars or not
  • onClick – Hook for Click action
  • onUpdate – Hook for onUpdate event


Angular & CSS Based Star Rating Component