shefutex / star-rating-angular-material

A star rating component in angular material

Star Rating component for Angular Material.

To preview demo of star rating project, click here

Adding star rating component in your project

Download star-rating.component to your angular material project and include required components from angular material.

<mat-star-rating [rating]="rating"  [starCount]="starCount" [color]="starColor" (ratingUpdated)="onRatingChanged($event)"></mat-star-rating>

Input for star rating

  @Input('rating') rating: number;
  @Input('starCount') starCount: number;
  @Input('color') color: string;
  

Name	Description
rating	Actual rating
starCount	Maximum number of stars for rating
color	Color of star in rating. Chosen from theme. primary, accent or warn

StarRatingColor enum from star-rating.component

enum StarRatingColor {
  primary = "primary",
  accent = "accent",
  warn = "warn"
}
  

Listening to events

onRatingChanged(rating){
	console.log(rating);
	this.rating = rating;
}