Implement event bindings

The angular-star-rating component has different input and output bindings. ClickEvent, HoverRatingChangeEvent, RatingChangeEvent 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 {
  ClickEvent,
  HoverRatingChangeEvent,
  RatingChangeEvent
} from '@angular-star-rating-lib/angular-star-rating';
import {Component} from '@angular/core';

@Component({
  selector: 'events-binings',
  template: `
    <div class="container">
      <div class="row">
        <div class="col">
          <h1>Event Bindings</h1>
          <star-rating
            [hoverEnabled]="true"
            (starClickChange)="onClick($event)"
            (ratingChange)="onRatingChange($event)"
            (hoverRatingChange)="onHoverRatingChange($event)">
          </star-rating>
         
          <hr>
          
          <div class="row">

            <div class="col">
              <b>onHoverRatingChangeResult:</b>
              <pre>{{onHoverRatingChangeResult | json}}</pre>
            </div>

            <div class="col">
              <b>onClickResult:</b>
              <pre>{{onClickResult | json}}</pre>
            </div>

            
            <div class="col">
              <b>onRatingChangeResult:</b>
              <pre>{{onRatingChangeResult | json}}</pre>
            </div>
                       

          </div>
        </div>
      </div>
    </div>
  `
})
export class EventBindingsComponent {
  onClickResult: ClickEvent;
  onHoverRatingChangeResult: HoverRatingChangeEvent;
  onRatingChangeResult: RatingChangeEvent;

  onClick = ($event: ClickEvent) => {
    console.log('onClick $event: ', $event);
    this.onClickResult = $event;
  };

  onRatingChange = ($event: RatingChangeEvent) => {
    console.log('onRatingUpdated $event: ', $event);
    this.onRatingChangeResult = $event;
  };

  onHoverRatingChange = ($event: HoverRatingChangeEvent) => {
    console.log('onHoverRatingChange $event: ', $event);
    this.onHoverRatingChangeResult = $event;
  };
}

2. Use the created component

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