title: Get data from a template back into the component
body: <p>I'm a angular2 newbie and I have a question about getting data back from a template. I have the following template:</p>
  
  <pre><code>&lt;h2&gt;Set parameters&lt;/h2&gt;
  &lt;button (click)="onClick()"&gt;Calculate&lt;/button&gt;
  &lt;h3&gt;Sailing profiles&lt;/h3&gt;
  &lt;label *ngFor="let sailingProfile of sailingProfiles"&gt;
      &lt;input type="checkbox" name="{{sailingProfile.title}}" value="{{sailingProfile.title}}"&gt;
      {{sailingProfile.title}}&lt;br&gt;
  &lt;/label&gt;
  &lt;h3&gt;Counters&lt;/h3&gt;
  &lt;label *ngFor="let counter of counters"&gt;
      &lt;input type="checkbox" name="{{counter.type}}" value="{{counter.type}}"&gt;
      &lt;input type="text"&gt; {{counter.type}}&lt;br&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>The purpose is to select one ore more sailing profiles and select one ore more counters and add a value for each selected counter. The component which uses this template is:</p>
  
  <pre><code>import {Component, EventEmitter, Output} from "@angular/core";
  import {CounterService} from "../service/counter.service";
  import {SailingProfileService} from "../service/sailing-profile.service";
  import {CounterModel} from "../model/counter";
  import {SailingProfileModel} from "../model/sailing-profile";
  
  @Component({
      selector: 'params',
      templateUrl: '../../template/params.html',
      providers: [CounterService, SailingProfileService],
  })
  export class ParamsComponent {
      @Output() paramsUpdated: EventEmitter&lt;string&gt; = new EventEmitter&lt;string&gt;();
  
      counters: CounterModel[] = [];
      sailingProfiles: SailingProfileModel[] = [];
  
      constructor(private counterService: CounterService, private sailingProfileService: SailingProfileService) {
      }
  
      ngOnInit() {
          this.counterService.getCounters().subscribe(c =&gt; this.counters = c);
          this.sailingProfileService.getSailingProfiles().subscribe(s =&gt; this.sailingProfiles = s);
      }
  
      onClick() {
          this.paramsUpdated.emit('test');
      }
  }
  </code></pre>
  
  <p>How do I get the selected sailing profiles and counters with their values back in the onClick() method? The desired result is a string which looks like this:</p>
  
  <pre><code>{"counters":[{"type":"Running hours","value":6000},{"type":"Seconds","value":31536000}],"sailing_profiles":[{"title": "Continuous sailing"}]}
  </code></pre>