CODEWITHSUNDEEP
angularangular6ng-bootstraprating
Ruchita Ajmera
Ruchita Ajmera

Reputation: 413

Get value of ngb-rating in typescript angular 6

I have used ngb-rating component and on click I am calling a function. This code is in forloop so i have to get data through id

<ngb-rating [(rate)]=item.Client_Rating id={{item.BookingId}}>
    <ng-template let-fill="fill" let-index="index">
        <span class="star" [class.filled]="fill === 100" (click)="somethingChanged(item.BookingId)">&#9733;</span>
    </ng-template>
</ngb-rating>

The function I have written is as below

somethingChanged(BookingId){    
    var num1= ((document.getElementById(BookingId) as HTMLInputElement));
    console.log(num1);
}

The value which i get in num1 variable is 

<ngb-rating aria-valuemin="0" class="d-inline-flex" role="slider" tabindex="0" ng-reflect-rate="9" id="179" aria-valuemax="10" aria-valuenow="9" aria-valuetext="9 out of 10">

I want only value 9. How to get it?

Upvotes: 1

Views: 5693

Answers (4)

user1353159
user1353159

Reputation: 1

I believe what you are looking for is to catch the event emitted when the user selects a new rating: rateChange: EventEmitter;

In your HTML:

<ngb-rating [(rate)]="item.Client_Rating" (rateChange)="somethingChanged(item.BookingId)"></ngb-rating>

In your component:

somethingChanged(bookingId) {
   console.log(this.item.Client_Rating)
}

If you use (click), the event emitted will be before the (rateChange) event so this is why you get the old value.

Upvotes: 0

deepMerge
deepMerge

Reputation: 1

Change 

<ng-template let-fill="fill" let-index="index">
 <span class="star" [class.filled]="fill === 100 (click)="somethingChanged(index+1)">
  &#9733;
 </span>
</ng-template>

to get the clicked value!

Upvotes: 0

Ruchita Ajmera
Ruchita Ajmera

Reputation: 413

<ngb-rating name="{{item.BookingId}}" [(ngModel)]="item.Client_Rating"  [(rate)]=item.Client_Rating  (click)="updateClientRatings(item.BookingId,item.Client_Rating)">
                                    <ng-template let-fill="fill" let-index="index" >
                                      <span class="star" [class.filled]="fill === 100" >&#9733;</span>
                                    </ng-template>
                                  </ngb-rating>

This is what I tried and it worked!

Upvotes: 0

ghuntheur
ghuntheur

Reputation: 392

Just try

somethingChanged(item){    
    var num1= item.Client_Rating;
    console.log(num1);
}

And change parameters in function call :

(click)="somethingChanged(item)"

Upvotes: 2

Related Questions