Skip to main content

angular bootstrap - Rating hover event

app.component.ts 

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

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


export class AppComponent {
  currentRate:number = 4;
  hovered:number = 0;
  textColor = "black";

  onHover(value:number){
    this.hovered = value;
    this.textColor = "blue";
  }

  onLeave(){
    this.hovered = 0;
    this.textColor = "gray";
  }
}
app.component.html 

<h4 style="padding-top:25px; padding-bottom:25px;">
  Angular Bootstrap - Rating hover event
</h4>

<div>Current Rate: <b>{{currentRate}}</b></div>
<br/>

<div [style.color]="textColor">
  Hovered : {{hovered}}
</div>
<br/>

<ngb-rating 
  [(rate)]="currentRate"
  (hover)="onHover($event)"
  (leave)="onLeave()">
</ngb-rating>
More Angular tutorials
Labels: