title: In Angular 2, How do I send Checkbox Values to my function in the component?
body: <p>I am new to Angular and using NgFor, I am displaying elements which I want to select them, upon clicking I should get the ID in the Component function.
  But I tried using ngModel and all the buttons get selected.</p>
  
  <p>I am trying to get the (hero.id) when the user checks the boxes. How do I do it? What are my mistakes.</p>
  
  <blockquote>
    <p>My HTML   </p>
  </blockquote>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;form (submit)="onSubmit()"&gt;
      &lt;tr *ngFor="let hero of heroes"&gt;
        &lt;input type="checkbox" name="timeid" value={ {hero.id}} class={{hero.id}}&gt;{{hero.time}}&lt;br&gt;
      &lt;/tr&gt;
      &lt;input type="submit" class="btn btn-primary" value="Remove Alarms"&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  
  <blockquote>
    <p>Here is my component.</p>
  </blockquote>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import {ValidateService} from '../../services/validate.service';
  import {AlarmService} from '../../services/alarm.service';
  import {FlashMessagesService} from 'angular2-flash-messages';
  import {Router} from '@angular/router';
  
  @Component({
    selector: 'app-register',
    templateUrl: './register.component.html',
    styleUrls: ['./register.component.css']
  })
  export class RegisterComponent implements OnInit {
  
    hours;
    id: String;
    timeid: String;
    time;
    heroes: any[];
  
  
    constructor(
      private validateService: ValidateService,
      private FlashMessage: FlashMessagesService,
      private Router: Router,
      private AlarmService: AlarmService
    ) {
  
  
    }
  
    ngOnInit() {
  
      this.ui();
    }
  
    onRegisterSubmit() {
  
      this.ui();
  
      this.heroes = JSON.parse(localStorage.getItem('users'));
  
      var timeStr = new Date(this.hours);
      var date = new Date(timeStr);
      var day = date.getUTCDate();
      var year = date.getUTCFullYear();
      var month = date.getUTCMonth() + 1;
      var hour = date.getUTCHours();
      var minutes = date.getUTCMinutes();
      var dateStr = "Time is " + hour + ":" + minutes + " in 24 HRS Time and the Date is " + day + "/" + month + "/" + year;
  
      console.log(dateStr);
  
      var user = {
        hours: (new Date(this.hours.replace('T', ' ').replace('-', '/'))).valueOf(),
        id: new Date().getTime(),
        time: dateStr,
        flag: 0,
      }
  
  
      setTimeout(() =&gt; {
        this.FlashMessage.show('Your alarm has been added.', {
          cssClass: 'alert-success',
          timeout: 5000
        });
      }, 10);
  
      var storage = localStorage.getItem('users');
      var final = [];
      if (storage == null || typeof(storage) == undefined) {
        final.push(user);
  
        localStorage.setItem('users', JSON.stringify(final));
        let time = new Date().getTime()
  
        this.AlarmService.setUpAlarms(time);
  
      } else {
        var get = JSON.parse(localStorage.getItem('users'));
        var size = Object.keys(get).length;
  
        for (var i = 0; i &lt; get.length; i++) {
          final.push(get[i]);
        }
        final.push(user);
        localStorage.setItem('users', JSON.stringify(final));
        let time = new Date().getTime()
  
        this.AlarmService.setUpAlarms(time);
      }
  
    }
  
  
    ui() {
      setTimeout(() =&gt; {
        this.heroes = JSON.parse(localStorage.getItem('users'));
        console.log(this.heroes);
      }, 100);
    }
  
    onSubmit() {
      var user = {
        timeid: this.timeid,
      }
      console.log(user);
  
    }
  }
  </code></pre>