Star rating is a way to give a rating to the content to show its quality or performance in different fields.
Use this example of the component to show the given review. The rating is not editable
Jane Lane
<!-- Simple Rating -->
<ply-star-rating>
<ply-star [rating]="4"></ply-star>
<h4 class="m-0">4</h4>
</ply-star-rating>
<!-- In Content -->
<div class="flex items-center">
<ply-avatar size="md" class="mr-4"></ply-avatar>
<div>
<p>Jane Lane</p>
<ply-star-rating class="scale-75 block -ml-3.75">
<ply-star [rating]="4"></ply-star>
<h4 class="m-0">4</h4>
</ply-star-rating>
</div>
</div>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add star-rating
// Paths are relative to aliases.components (default: src/app/components)
import { StarRatingComponent } from './star-rating/star-rating.component';
import { StarComponent } from './star-rating/star/star.component';
@Component({
selector: 'app-star-rating-example',
imports: [
StarComponent,
StarRatingComponent
],
template: `...`
})
export class StarRatingExampleComponent {}Install
npx ply-ui-cli add star-rating
Use this example of the component to give rating base on criteria
<div class="flex flex-col">
@for (rating of ratings; track rating; let i = $index) {{ '{' }}
<div class="flex items-center gap-4">
<span class="mr-8 min-w-31.5">{{ '{{' }} rating.label {{ '}}' }} </span>
<ply-star-rating class="mb-2">
<ply-star (ratingChanged)="handleRating($event, i)" [editable]="true" [rating]="rating.value"></ply-star>
<h6 class="text-sm ml-2">{{ '{{' }} rating.value {{ '}}' }}</h6>
</ply-star-rating>
</div>
{{ '}' }}
<div class="flex items-center gap-4 mt-6">
<span class="mr-8 font-bold min-w-31.5">Total</span>
<ply-star-rating>
<ply-star [rating]="averageRating"></ply-star>
<h6 class="text-sm ml-2">{{ '{{' }} averageRating | number:'1.0-2' {{ '}}' }}</h6>
</ply-star-rating>
</div>
</div>
ratings = [
{{ '{' }} label: 'Quality', value: 0 {{ '}' }},
{{ '{' }} label: 'Communication', value: 0 {{ '}' }},
{{ '{' }} label: 'Timeline', value: 0 {{ '}' }},
];
averageRating = 0;
handleRating(rating: number, index: number): void {{ '{' }}
this.ratings[index].value = rating;
this.averageRating = this.ratings.reduce((acc, curr) => acc + curr.value, 0) / this.ratings.length;
{{ '}' }}
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add star-rating
// Paths are relative to aliases.components (default: src/app/components)
import { StarRatingComponent } from './star-rating/star-rating.component';
import { StarComponent } from './star-rating/star/star.component';
@Component({
selector: 'app-star-rating-example',
imports: [
StarComponent,
StarRatingComponent
],
template: `...`
})
export class StarRatingExampleComponent {}Install
npx ply-ui-cli add star-rating
Run the following command to add this component to your project:
npx ply-ui-cli add star-rating
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add star-rating
// Paths are relative to aliases.components (default: src/app/components)
import { StarRatingComponent } from './star-rating/star-rating.component';
import { StarComponent } from './star-rating/star/star.component';
@Component({
selector: 'app-your-component',
imports: [
StarComponent,
StarRatingComponent
],
template: `...`
})
export class YourComponent {} API for star-rating — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
ply-star | rating | number | 0 | The rating input property. |
ply-star | editable | boolean | false | The editable input property. |
ply-star | (ratingChanged) | number | — | The ratingChanged output property. |
ply-star-rating | ariaLabel | unknown | 'Rating' | Accessible label for the star rating group. |
Content