Implement event bindings

The angular-star-rating component has different input and output bindings.

As a precondition i consider you have install the package correctly

In this example i create a simple component that sets up several event bindings for the star rating component. It also logs all emitted data to the view and the browser console.

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

   // my-rating.component.ts
   import {Component} from "@angular/core";
   import {OnClickEvent, OnRatingChangeEven, OnHoverRatingChangeEvent} from "angular-star-rating";
   
   @Component({
       selector: 'my-rating',
       template: `    
           
               <star-rating-comp   [starType]="'svg'" 
                                   [hoverEnabled]="true"
                                   (onClick)="onClick($event)" 
                                   (onRatingChange)="onRatingChange($event)"
                                   (onHoverRatingChange)="onHoverRatingChange($event)">                             
               </star-rating-comp>
               <p>onHoverRatingChangeResult: {{onHoverRatingChangeResult | json}}</p>
               <p>onClickResult: {{onClickResult | json}}</p>
               <p>onRatingChangeResult: {{onRatingChangeResult | json}}</p>
       `
   })
   export class MyEventsComponent {
   
       onClickResult:OnClickEvent;
       onHoverRatingChangeResult:OnHoverRatingChangeEvent;
       onRatingChangeResult:OnRatingChangeEven;
   
       onClick = ($event:OnClickEvent) => {
           console.log('onClick $event: ', $event);
           this.onClickResult = $event;
       };
   
       onRatingChange = ($event:OnRatingChangeEven) => {
           console.log('onRatingUpdated $event: ', $event);
           this.onRatingChangeResult = $event;
       };
   
       onHoverRatingChange = ($event:OnHoverRatingChangeEvent) => {
           console.log('onHoverRatingChange $event: ', $event);
           this.onHoverRatingChangeResult = $event;
       };
   
   }

2. Use the created component

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