Wednesday 5 October 2016

Create a Star Rating Component in Angular2 JS using Typescript

In this post we are going to see how to create a component in Angular2 Js, for that we are taking the a valid sample component which are used in real time scenario like star rating component which is used to rate a value in applications

for basic setup and structuring of angular2 application please refer this link http://geeksmsdn.blogspot.in/2016/10/create-basic-structure-and-setup-for.html, After setup the basic structure here we are there to develop a star rating component, what we are trying to do, we are trying to develop a component like below.





 Rating control:
***********************



To do this first we have to create a component and then module , finally we have to import that module that't it

Steps to do:
*****************************************
1. Create a folder name editors under the com folder
2. Create a file named star.ts
3. Create a file named ratingcontrol.ts
4. Create a file named ratingcontrol.html
5. Create a file named editor.module.ts
6. Import this module
7. add the Star Component in the App.component
7. Bootstrap the App.Module



Star.ts

From this Code you may see what we are trying to do, we are creating a model for star component, based on which we are controlling the star rating component 

export class star {
    public filled:boolean;
}




ratingcontrol.ts

From this code you can see the full implementation of star rating component, where are trying to build a component like below, here we are declaring component in three kind of formats with simple implementation , in one tag we are passing value directly to the property, in another thing we are passing value to the control with the models, 

if you want to pass a value directly then pass it like         color="red"
if you want to pass a value from model then pass it like  [color]="color"
if you want to pass a model with two way then                  [(color)] ="color"

The star component have the following properties

ratingvalue : This is the actual value which represents the value of rating,This can acts as one-way and well as Two way 

max : This is the number representation of total number of stars to draw

color : This is the color of the Outline of the star

readonly: This property makes the component readonly, i.e user cant give rating, but in code you can change it

fillcolor  : This property is the color of the star, if you doesnt give this then gold is default color

OnRatingChanged : This is the callback event which can trigger when rating is changed ,this can be hooked in your applications , to get the notify when changes



<star-rating    [(ratingvalue)]="rating"  [max]="max" 
                [color]="starcolor"       [readonly]="readonly" 
                [fillcolor]="fillcolor"   (OnRatingChanged)="ratingChanged($event)" >
 </star-rating>


<star-rating    ratingvalue="4"     max="10" 
                color="gray"        fillcolor="orange" 
                readonly="false"    (OnRatingChanged)="ratingChanged($event)" >
</star-rating>

 <star-rating    ratingvalue="2"   max="5" color="green" fillcolor="green">
 </star-rating>

   import {    Component,ViewEncapsulation,Input,Output,
                    EventEmitter,ElementRef,OnInit,OnChanges,
                    DoCheck,Renderer,AfterViewInit,AfterViewChecked,
                    AfterContentInit,ViewChildren,ContentChildren,
                    ChangeDetectionStrategy, HostBinding 
                } from '@angular/core';

   import { star } from './star';

    @Component({
        selector:'star-rating',
        changeDetection:ChangeDetectionStrategy.OnPush,
        templateUrl:'com/editors/ratingcontrol.html',
        styles:[`

            .rating {
                unicode-bidi: bidi-override;              
                text-align: start; 
                display:inline-block;  
                direction:rtl;      
            }    
            .star{      
                color: gold;    
            }
            .rating > span {
                display: inline-block;
                position: relative;
                width: 0.9em;
                font-size:30px;
            }
            .rating:hover{
                cursor:pointer;
            }
            .rating > span:hover,
            .rating > span:hover ~ span {
                color: transparent;
            }
        .rating > span:hover:before,
        .rating > span:hover ~ span:before {
                content: "\\2605";
                position: absolute;
                left: 0;
                color: gold;
        }

        `],

        host:{    
        }

     })



   export class StarRatingComponent implements OnInit , 
                                                    OnChanges,
                                                    AfterViewInit,
                                                    AfterContentInit,
                                                    AfterViewChecked {

        @Input() ratingvalue:number;
        @Output() ratingvalueChange:EventEmitter<number> = new EventEmitter<number>();

        @Output() OnRatingChanged = new EventEmitter();

        @Input() max:number;

        @Input() readonly:boolean;

        @Input() starsize:number;

        @Input() color:string;

        @Input() fillcolor:string;

        @Output() OnMouseOver = new EventEmitter();

        @ViewChildren('starfilled') starChildren;

        public stars:star[];
        private ele:ElementRef;
        private render:Renderer;
        private changeElements:HTMLElement[]

        constructor(e1:ElementRef,render:Renderer){
            this.ele = e1;
            this.render = render;  
            this.fillcolor = "gold";    
        }

        public ngOnInit(){
        
        }

        public ngOnChanges(){ 
        if(this.readonly==undefined){
            this.readonly = false;
        }     
        if(typeof(this.readonly)=="string"){    
            this.readonly = (String(this.readonly)=="true");    
        }
        this.updateStars();
        }

        public ngAfterViewInit(){
        this.starChildren.changes.subscribe(changes=>
        {   
            this.changeElements = changes._results.map(
                (eleref)=> eleref.nativeElement
                );

            this.OnRatingChanged.next(
                {  ratingvalue:this.ratingvalue,
                    max:this.max,
                    Changedelements:this.changeElements
                });           
        });  
        }

        public OnMouseenter(evt){  
        this.OnMouseOver.next(evt);
        }

        public ngAfterViewChecked(){
            
        }

        public ngAfterContentInit(){
        
        }

        private updateStars(){
            this.stars = [];    
            var j = this.max - this.ratingvalue;

            for (var i = 1; i <= this.max; i++) {                                  
                    this.stars.push({ filled: i > j });         
                }
            this.render.setElementStyle(this.ele.nativeElement,'color',this.color);
        }

        private toggle(index){     
            if(this.readonly===false){
            this.ratingvalue =  (this.max - index);
            this.updateStars(); 
            this.ratingvalueChange.emit(this.ratingvalue);      
            }
        }


    }





ratingcontrol.html

From this you can see that the implementation of star component. create this html file and link it with component

<div class="rating">
    <span   *ngFor="let star of stars; let i=index" 
            [class.star]="star.filled" 
            (click)="toggle(i)">
        <span   #starfilled (mouseenter)="OnMouseenter($event)" 
                [style.color]="fillcolor" *ngIf="star.filled">
                    &#9733;
        </span>
        <span   (mouseenter)="OnMouseenter($event)" 
                *ngIf="!star.filled">
                    &#9734;
        </span>        
    </span>
</div>






editor.module.ts

From this code , you can see that the implementation of module for our star rating component

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { StarRatingComponent } from './ratingcontrol';

@NgModule({
    imports:[CommonModule],
    declarations:[StarRatingComponent],
    providers:[],
    exports:[StarRatingComponent]
})
export class EditorModule{

}





app.component.ts
After creating the module , we have to create a root component in which we are adding the star component,In this component we can see the implementation of star component in three different ways 

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

  @Component({
    selector:'my-app',
    template:`
    <span style="font-size:18px;">Rajesh G an Architect :</span>  
    <star-rating    ratingvalue="4"     max="10" 
                    color="gray"        fillcolor="orange" 
                    readonly="false"    (OnRatingChanged)="ratingChanged($event)" >
    </star-rating>

    <br/>
    <span style="font-size:18px;">Tamil Movie rate it :</span>
    <star-rating    [(ratingvalue)]="rating"  [max]="max" 
                    [color]="starcolor"     [readonly]="readonly" 
                    [fillcolor]="fillcolor" (OnRatingChanged)="ratingChanged($event)" >
    </star-rating>

    <br/>
     <span style="font-size:18px;">Indian Cricket Team :</span>
    <star-rating    [(ratingvalue)]="rating2"   max="5" color="blue" fillcolor="blue">
    </star-rating>

    <br/>
     <span style="font-size:18px;">Microsoft Bug :</span>
    <star-rating    ratingvalue="2"   max="5" color="green" fillcolor="green">
    </star-rating>

    <div>
    <button type="button" class="btn btn-sm btn-success" (click)="PrintValue()">
        Print Values
    </button>
    </div>

    `,    
    encapsulation:ViewEncapsulation.None ,
    styles:[]  ,     
  })


  export class AppComponent{

    rating = 3;
    rating2 = 2;

    max = 5;
    starcolor="red";
    readonly = false;
    fillcolor="red";

    ratingChanged(value){
        console.log("OnRating change Callback");
        console.log(this.rating);
        console.log(value);
        console.log("");
    }

    PrintValue(){    
        console.log("Values of Ratings");
        console.log("Rating :" + this.rating);
        console.log("Rating1 :"+this.rating2);
        console.log("");
    }

  }





app.module.ts

From this code you can see the root component is bootstrapped and dependencies are injected

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';
    import { EditorModule  } from './editors/editor.module';
    import { AppComponent } from './app.component';


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

    }




main.ts

Here we are bootstrapping the Appmodule

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { HelloModule } from './hello.module'

const platform = platformBrowserDynamic();

let moduleref = platform.bootstrapModule(AppModule);



index.html

Here in the index.html file we can see the my-app tag, which will trigger the app.component

<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="style.css">

    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
      
    <script src="lib/jquery.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
  

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    
    <script>
      System.import('com').catch(function(err){ 
          console.error(err); 
        });
    </script>

  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>





Output:
************************







Output of a callback function where we are printing the values of rating control , when rating changes, in this function we can notice that the model also updated when we change the value, this is because of two way binding 












Callback console print values when value changes in the star rating component











From this post you can learn how to create a star rating component using Angular 2 and Typescript, and also you can learn how to inject that component in to the root module.




No comments:

Post a Comment