src/app/book-detail/rating/rating.component.ts
Component that displays the rating for a given book
The rating is displayed on a scale of 0-5 stars.
| selector | book-rating |
| templateUrl | ./rating.component.html |
rating
|
Rating information for the book This input property is passed down from the parent BookDetailComponent to this component.
Type: |
| math |
math: |
Default value : Math
|
|
Reference to the JavaScript Math object so that it can be used in the template |
import { Component, Input } from '@angular/core';
import { Rating } from "app/models/rating.model";
/**
* Component that displays the rating for a given book
*
* The rating is displayed on a scale of 0-5 stars.
*/
@Component({
selector: 'book-rating',
templateUrl: './rating.component.html'
})
export class RatingComponent {
/**
* Rating information for the book
*
* This input property is passed down from the parent {@link BookDetailComponent}
* to this component.
*/
@Input() rating: Rating;
/**
* Reference to the JavaScript Math object so that it can be used in the template
*/
math = Math;
}
<!-- BOOTSTRAP'S GLYPHICONS, see here: http://getbootstrap.com/components/#glyphicons -->
<!-- note: the number of filled stars = the rating rounded to the nearest integer -->
<p>
<span [title]="rating.rating + ' out of 5 stars'">
<span class="glyphicon" style="color: gold"
*ngFor="let i of [1, 2, 3, 4, 5]"
[ngClass]="{
'glyphicon-star': math.round(rating.rating) >= i,
'glyphicon-star-empty': math.round(rating.rating) < i
}">
</span>
</span>
({{ rating.count }} customer reviews)
</p>