Skip to content

Implement property bindings

Michael Hladky edited this page Apr 20, 2018 · 3 revisions

The angular-star-rating component has different input or property bindings.

As a precondition i consider you have install the package correctly

In this example i create a simple component that sets up several property bindings for the star rating component.

  1. Create a component and use the star rating component int the view with the provided properties

    // my-property-bindings.component.ts
    import {Component} from "@angular/core";
    import {} from "angular-star-rating";
    
    @Component({
        selector: 'my-property-bindings',
        template: `    
            
                <star-rating   [starType]="myStarType" 
                                    [labelText]="myLabelText"
                                    [getColor]="getColor>                             
                </star-rating>
        `
    })
    export class MyPropertyBindingsComponent {
    
        myStarType:string = 'svg';
        myLabelText:string = 'My text here!';
        onRatingChangeResult:RatingChangeEven;
    
        getColor(rating: number, numOfStars: number, staticColor: string): string {
         console.log('getColor rating: ', rating, 'numOfStars: ', numOfStars, 'staticColor: ', staticColor);
         let colors = ['default', 'negative', 'ok', 'positive'];
         return colors[Math.floor(Math.random() * colors.length)];
       }
    
    }
  2. Use the created component

    <!-- app.component.html-->
    <my-property-bindings></my-rating>