rateChange on ngb-raring fired while page is on initialization

Question

I am very new to angular, I am trying to send a new Rate to the dataBase using rateChange in ngb-rating but it have been fired while it gitting the values from the server for example when I try to console.log the Rate it print the rate that I am getting from the DataBase.

this is the Html Templet:



    

        

            
                
                
            
            
                {{item.Name}}
                {{item.Description | Summery}}
                {{item.price | currency}}
                
                
                    
                        ★

ts file:

import { Component, OnInit } from '@angular/core';
import { Item } from 'src/moduls/item';
import { ItemService } from './item.service';

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

export class ItemComponent implements OnInit {

  constructor(private itemService: ItemService) { }
  items: any[] = [];
  onRateChange(newRate: number) {
    console.log(newRate);
  }

  ngOnInit(): void {
    this.getItems();
  }



  getItems() {
    return this.itemService.getaData().subscribe(
      Response => {
        this.items = Response as Item[];
        console.log(this.items);
      }
    )
  }

}

user_390161 · Answer

The ng-bootstrap is actually lying to us. Looking into the rating sources code I see the rateChange is emitted whenever the rating value is changed even if the user is not involved.

I see only one solution - leverage the reactive forms. You might subscribe to the valueChanges observable after the initial value is set.

import { Component, OnInit, OnDescroy } from '@angular/core';
import { Item } from 'src/moduls/item';
import { ItemService } from './item.service';

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

export class ItemComponent implements OnInit, OnDestroy {
  onDestroy$: Subject = new Subject();
  items: Array<{control: FormControl, item: Item}> = [];

  constructor(private itemService: ItemService) { }

  ngOnInit(): void {
    this.getItems();
  }

  ngOnDestroy(): void {
    this.onDestroy$.next();
  }

  getItems() {
    return this.itemService.getaData().subscribe(
      Response => {
        this.items = (Response as Item[]).map(item => {
           const control = new FormControl(item.stars);
           control.valueChanges
              .tap(takeUntil(this.onDestroy$))
              .subscribe(newRate => this.saveRating(newRate,item));
           return {control, item};
        });
        console.log(this.items);
      }
    )
  }

  saveRating(newRate: number, item: Item) {
    console.log(newRate, item);
  }

}



    

        

            
                
                
            
            
                {{item.item.Name}}
                {{item.item.Description | Summery}}
                {{item.item.price | currency}}
                
                
                    
                        ★

You would need to import FormModule to make it work.

That answer consumed quite a time. I do hope it would be useful (:

I created an issue to fix the documentation.

rateChange on ngb-raring fired while page is on initialization

1 Answers