Angular 5 star rating example
ng star rating widget

Let's build simple five star rating widget using Angular, Angular Material and Flex layout. This star rating widget will be purely based on CSS and we will use Angular only to manipulate selected star.So let' start, first let's create component, and moduleIn our Module file let's include needed libraries, open star-rating.module.ts and add this:Next let's create our HTML, open star-rating.component.html and add this:And now, let's create our simple logic in component it self, open star-rating.component.tsAnd last thing, little bit of CSS:We will define array of stars object and put it in stars which we will loop in our HTML using *ngFor and we will add click method for each item:And now with little bit of css magic we will use hovering animation and when user clicks on one stars we will take the star id, replace classes to disable further selection and mark selected stars in different color in comparison with stars that are not selected. So if user select third star, we will use classes to change color of stars 1-3 while stars 4 and 5 will stay in non selected color.But best is to see it live:

  • Photo
  • Angular