title: Angular 2 Checkbox value
body: <p>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?</p>
  <p>the HTML code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tbody&gt;
      &lt;tr *ngFor=&quot;let player of bullsPlayers; let i = index;&quot;&gt;
        &lt;td&gt;{{player.fullName}}&lt;/td&gt;
        &lt;td&gt;{{player.position}}&lt;/td&gt;
        &lt;td&gt;{{player.ranking}}&lt;/td&gt;
        &lt;td&gt;
          &lt;input 
            type=&quot;checkbox&quot; 
            class=&quot;form-check-input&quot; 
            [id]=&quot;bullsPlayers[i]&quot; 
            [name]=&quot;bullsPlayers[i]&quot;
            value=&quot;player.fullName&quot; 
            (change)=&quot;addOrRemoveBullsPlayer($event.target.value)&quot; /&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
      
  &lt;div&gt;{{selectedBullsPlayers}} &lt;/div&gt;
  </code></pre>
  <p>TS code (only related lines):</p>
  <pre class="lang-ts prettyprint-override"><code>bullsPlayers = [];
  selectedBullsPlayers = [];
      
  constructor(private _playerService: PlayerService) {}
      
  ngOnInit (){
    this._playerService.getPlayers()
      .then(players =&gt; this.players = players)
      .catch(error =&gt; console.log(error));
    this._playerService.getBullsPlayers()
      .then(players =&gt; this.bullsPlayers = players)
      .catch(error =&gt; console.log(error));
  }
      
  addOrRemoveBullsPlayer(value: string) {
    var indexOfEntry = this.selectedBullsPlayers.indexOf(value);
    if(indexOfEntry &lt; 0) {
      this.selectedBullsPlayers.push(value);
    } else {
      this.selectedBullsPlayers.splice(indexOfEntry, 1);
    }
  }
  </code></pre>