Skip to content

Instantly share code, notes, and snippets.

@juanbrusco
Created June 4, 2020 19:01
Show Gist options
  • Save juanbrusco/008f7dc769ec3a6f694f7529a9563cb7 to your computer and use it in GitHub Desktop.
Save juanbrusco/008f7dc769ec3a6f694f7529a9563cb7 to your computer and use it in GitHub Desktop.
## HTML
<div class="row">
<div class="col-sm-12">
<ul class="list-inline rating-list"
*ngFor="let star of stars" style="display: inline-block" >
<li (click)="countStar(star)"
[ngClass]="{'selected': (star <= selectedValue)}">
<i class="fa fa-star"></i>
</li>
</ul>
</div>
</div>
## TS
stars: number[] = [1, 2, 3, 4, 5];
selectedValue: number;
countStar(star) {
this.selectedValue = star;
console.log('Value of star', star);
}
## CSS
.rating-list li {
float: right;
color: #ddd;
padding: 10px 5px;
}
.rating-list li:hover,
.rating-list li:hover ~ li, .rating-list li.selected {
color: #ffd700;
}
.rating-list {
display: inline-block;
list-style: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment