In this article, we will know about implementing a user rating component in the angular applications using the 'NgBootstrap' library.
Key Features Of NgBootstrap Rating Component:
max - The 'max' input property to define the max number of rating icons or images(eg: stars that represent rating). By default, the 'max' input property value is 10.
rate - The 'rate' input property to define the current rating value. The 'rate' input value can take either number or decimal value.
readonly - The 'readonly' input property is of boolean type. If it is set to 'true', then the user can't add a rating this rating only used for display purposes.
hover - The 'hover' event raises on mouse hovering.
leave - The 'leave' event fires on a mouse moving from the rating component.
rateChange - The 'rateChange' event raises when the user clicks on a new rating.
Create An Angular Sample Application:
Let's implement an angular sample that will display the user rating component.
Command To Install Angular CLI:(If not installed on your system previously)
npm install -g @angular/cli
Angular CLI Command To Create Angular App: ng new your_project_name
Command To Run App:
ng serve
Install NgBootstrap Library:
Command To Install NgBootstrap Library:
ng add @ng-bootstrap/ng-bootstrap
After installing 'ng-bootstrap' library 'NgbModule' needs to be imported in our 'app.module.ts' file, since we are using angular CLI to run the command so 'NgbModule' will be automatically imported.
Render Rating Component:
Now let's render the 'NgBootstrap' library rating component with default settings.
src/app.component.html:
<ngb-rating></ngb-rating>
'max' Input:
The 'max' input property to display the number of icons of rating. By default 'max' input value is 10.
src/app.component.html:
<ngb-rating max="3"></ngb-rating>
- Here we set the 'max' value to '3'
'rate' Input:
The 'rate' has the capability to capture the selected rating value and also we can set default rate value on component load.
src/app.component.html:
<ngb-rating [(rate)]="currentRating"></ngb-rating> <div>Rating: {{currentRating}}</div>
- Here assigned 'currentRating' variable to the 'rate' property. Here we used the same variable to display the user rating variable.
src/app.component.ts:
export class AppComponent { currentRating= 2; }
- Here we set our default selected rating value to '2'
'readonly' Input:
The 'readonly' input makes our rating component a non-selectable rating component.
src/app.component.html:
<ngb-rating [(rate)]="currentRating" readonly="true"></ngb-rating>
- Here we assigned 'true' value to the 'readonly' property this makes our rating component 'non-selectable'.
'hover' Event:
The 'hover' event raised on mouseover on our rating component.
src/app.component.ts:
ratingHover(event){ alert("mouseover event"); }src/app.component.ts:
<ngb-rating [(rate)]="currentRating" (hover)="ratingHover($event)" ></ngb-rating>
- Here registered rating component 'hover' event. The '$event' value will the rating value at the time of mouseover.
Custom Rating:
We can customize the rating component by using 'ng-template' inside of the 'ngb-rating'. Then 'ngb-rating' provides 2 context variables like 'fill' and 'index'. The 'fill' area to determine the area of rating filled. The 'index' gives the position of each rating(means position of each star).
Now we are going to customize our rating component like:
src/app.component.css:
- Instead of a star rating, we will use the 'hearts' symbol rating.
- Rating selected area will be in red color and the remaining area in black color.
.filled{ color: red; } .notfilled{ color:#6e6a6a; }src/app.component.html:
<ngb-rating [(rate)]="currentRating"> <ng-template let-fill="fill" > <span [class.filled]="fill === 100" [class.notfilled]="fill === 0"> ♥ </span> </ng-template> </ngb-rating>
- Here we customized the rating template by using 'ng-template'.
- On 'ng-template' we can 'let-fill' variable its value coming from the 'fill' variable of the 'ngb-rating' component context.
- Using the 'fill' value we can determine the area to be painted for the selected ratings.
- If we receive the 'fill' value to 100 then we enabling CSS class like 'filled' and if we receive the 'fill' value to 0 then we enabling the CSS class like 'notfilled'.
Decimal Value Rating Component:
We know that the 'rate' input property also accepts decimal values, so we can customize of rating component to paint partially based on the decimal values we select.
src/app.component.css:
.filled{ color: red; } .defaultHeart{ position: relative; display: inline-block; color:gray; font-size: 50px; } .paintedHeart{ position: absolute; display: inline-block; overflow: hidden; color: red; }src/app.component.cs:
<ngb-rating [(rate)]="currentRating"> <ng-template let-fill="fill"> <span class="defaultHeart" [class.filled]="fill === 100"> <span class="paintedHeart" [style.width.%]="fill">♥</span>♥ </span> </ng-template> </ngb-rating> <div> <input type="text" [(ngModel)]="txtRateValue"/> <button type="button" (click)="updateRating()">Update Rating</button> </div>
- (Line: 3-5) Here we can observe we rendering hearts span tag inside of another hearts span tag means here we are using 2 hears but we will use CSS trick to display them as single hearts.
- Parent hearts span element we added class like 'defaultHeart' it contains color like 'gray'. If the 'fill' value is 100 then we enable one more class like 'filed' which overrides color to 'red'.
- Child's hearts span element we added class like 'paintedHeart' which default color is 'red', here we reduce or increase the size of the hearts based on the 'fill' property.
- Here using CSS property like 'position', we rendering child's heart's on top of the parent heart's, so if we reduce the width of the child's hearts then the remaining 'gray' part's of the rating displayed from the parent heart's
- Here we have added a text box to enter the rating value including decimals and on clicking the' Update Rating' button our rating component will be updated.
export class AppComponent { currentRating= 2; txtRateValue = 0; updateRating(){ this.currentRating = this.txtRateValue; } }Since I'm using a text box with 'ngModel', so we need to import the 'FormModule' into our app.module.ts file
src/app.module.ts:
That's all about the 'NgBootstrap' library user rating component integration steps in angular application.
Support Me!
Buy Me A Coffee
PayPal Me
Wrapping Up:
Hopefully, I think this article delivered some useful information on integrating the user rating component in the angular application using NgBootstrap library. I love to have your feedback, suggestions, and better techniques in the comment section below.
Can we use this inside a loop , I want this rating setup for each row ...
ReplyDelete