Angular 2 Checkbox value

Question

I created a table of players class (fullname, position and ranking), the table has c checkbox for each raw. How can I implement so when I click on the checkbox, the value of the player (for that raw) will appear in the html?

the HTML code:

<table>
  <tbody>
    <tr *ngFor="let player of bullsPlayers; let i = index;">
      <td>{{player.fullName}}</td>
      <td>{{player.position}}</td>
      <td>{{player.ranking}}</td>
      <td>
        <input 
          type="checkbox" 
          class="form-check-input" 
          [id]="bullsPlayers[i]" 
          [name]="bullsPlayers[i]"
          value="player.fullName" 
          (change)="addOrRemoveBullsPlayer($event.target.value)" />
      </td>
    </tr>
  </tbody>
</table>
    
<div>{{selectedBullsPlayers}} </div>

TS code (only related lines):

bullsPlayers = [];
selectedBullsPlayers = [];
    
constructor(private _playerService: PlayerService) {}
    
ngOnInit (){
  this._playerService.getPlayers()
    .then(players => this.players = players)
    .catch(error => console.log(error));
  this._playerService.getBullsPlayers()
    .then(players => this.bullsPlayers = players)
    .catch(error => console.log(error));
}
    
addOrRemoveBullsPlayer(value: string) {
  var indexOfEntry = this.selectedBullsPlayers.indexOf(value);
  if(indexOfEntry < 0) {
    this.selectedBullsPlayers.push(value);
  } else {
    this.selectedBullsPlayers.splice(indexOfEntry, 1);
  }
}

what you mean by the value of the player ?

El houcine bougarfaoui
– El houcine bougarfaoui

2017-12-02 10:49:38 +00:00
Commented Dec 2, 2017 at 10:49 — El houcine bougarfaoui
– El houcine bougarfaoui, Commented Dec 2, 2017 at 10:49
for example - it's full name

lili666
– lili666

2017-12-02 12:21:39 +00:00
Commented Dec 2, 2017 at 12:21 — lili666
– lili666, Commented Dec 2, 2017 at 12:21

pizzaisdavid · Accepted Answer · 2018-12-25 08:43:01Z

1

use ngModel directive and bind it to player.selected

html:

<td>
  <input
    type="checkbox"
    class="form-check-input"
    [id]="bullsPlayers[i]"
    [name]="bullsPlayers[i]"
    [(ngModel)]="player.selected"
    value="player.fullName"
    (change)="updateBullsPlayer()"/>
</td>

component.ts:

updateBullsPlayer() {
  this.selectedBullsPlayers = selectedBullsPlayers.filter((item) => item.selected)
}

don't worry about selected field it will added automatically by ngModel

edited Dec 25, 2018 at 8:43

pizzaisdavid

4693 silver badges14 bronze badges

answered Dec 2, 2017 at 12:58

El houcine bougarfaoui

37.6k10 gold badges40 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Georgios Moralis · Accepted Answer · 2017-12-02 11:03:50Z

0

change

        value="player.fullName"

to

        [value]="player.fullName"

Oh, and change your display div into something like

        <div *ngFor="let playerFullName of selectedBullsPlayers">{{playerFullName}}</div>

edited Dec 2, 2017 at 11:03

answered Dec 2, 2017 at 10:58

Georgios Moralis

1991 silver badge11 bronze badges

Collectives™ on Stack Overflow

Angular 2 Checkbox value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related