In my last article we discuss on how to use Typehead in angular application. In these tutorial i discuss on how to add star-rating in our Angular Forms.
First we need to add below line in our app.module.ts file.
.................
//we need to import first Rating Module From Bootstrap.
import { RatingModule } from 'ngx-bootstrap';
...................
@NgModule({
.........
imports: [
RatingModule.forRoot(),
...
]
})
export class AppModule(){}
After adding RatingModule in the app module file. Now we can use these in any component.
Let’s create Basic code for the star-rating elements.
From above code you can easily set star-rating. we have mainly two attributes here
1) MAX: maximum value of the Star Rating.
2) rate: its a variable of ngModel sot its change value we can get that value easily in an function we get value of the Star Rating.
Their is Read-only parameter you can pass so value not changeable. Example display in below example.
When Hover trigger star rating value change also add title of each display in Below Example.
Output of above all code display in below video
Spread the love
24