Monday, October 16, 2017

Rating star component using Angular.

In this article I will be discussing about implementing a simple rating star component. This component can be reused very easily. Let us check with a working example.


<rating-star max = 10 (onRating) = onRating($event)></rating-star>

Above is the simple representation of a rating star component, this you can place where ever you want. Now let us check the component code. Here "onRating" method is nothing but you will be getting the selected rating count

Rating star Component


import { Component,Input,Output,EventEmitter  } from '@angular/core';

@Component({
  selector: 'rating-star',
  template: '<div>'
      +'<span class="icon" *ngFor = "let s of maxItem">'
         +'<i [ngClass]=" s <= this.ratedCount ? \'filled\' :\'\'\ " class="fa fa-star"' 
            +'aria-hidden="true" (click)="toggleRating(s)"></i>'
      +'</span>'
    +'</div>',
  styleUrls: ['./app.component.css']
})
export class RatingStarComponent {
 @Input() max: number;
 @Output() onRating = new EventEmitter<Number>();
 
 maxItem : any[];
 ratedCount : number;
 
 constructor(){
     this.ratedCount = 0;
 }
 
 ngOnInit(){
     this.maxItem = [];
     for(var i=0;i<this.max;i++){
         this.maxItem.push(i+1);
     }
 }
 toggleRating(s:number){
      this.ratedCount = s;
      this.onRating.emit(this.ratedCount);
 }

}

Parent component

Here you can get the selected rating count. Check below code.


import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title : string;
  constructor(){
    this.title = 'Rating stars using Angular';
  }
  onRating(rating : number){
    console.log(rating);
  }
}

I will share my css code as well, basically for coloring the star and some look and feel. Here I have used fontawesome icons, you can replace with any icon.

css


.icon{
    display:inline-block;
    margin-right:3px;
    cursor:pointer;
    color:#ccc;
}
.icon:hover{color:#006dcc;}
.filled {color:#006dcc;}

And we are done. You need to import this component in your module for to work everywhere, check below module code as well.

Module


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import {RatingStarComponent} from './ratingstarComponent';

@NgModule({
  declarations: [
    AppComponent,RatingStarComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Demo

Set initial rating value


If you want to set intial rating you can update the code like below.


 <rating-star setRating = 2 max = 10 (onRating) = onRating($event)></rating-star>

Here we are setting initial rating as 2. Update our rating component as well.


//add input
 @Input() setRating : number;
 
  //set in our ngOnInit methode
  ngOnInit(){
     this.ratedCount = this.setRating;
    //etc 
 }

If you want to know more about reusable component refer this link and this link for sharing data between components using service. In this article we have discussed about creating a simple rating star component using Angular.

Related Info

1. How to show a date is today or yesterday or last week etc using pipe - Angular

2. Disable submit button until all mandatory fields are filled - Angular

3. Angular client side pagination.

4. Angular show more/less pagination

No comments :

Post a Comment