title: Angular2: Get selected option in select component
body: <p>I am using angular 2.0.0-rc.4.</p>
  
  <p>I have a form (parent component), and I have in it some drop-down lists from other components, each dropdown has <code>ts</code> and <code>html template</code> else where, each one get its data from its component. When submitting the form I need the selected value of each one. How can I access it from the parent ? </p>
  
  <p>-Parent Form HTML:</p>
  
  <pre><code>&lt;form class="" (submit)="submitNewModel($event, label.value)"&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="label" class="control-label"&gt; Label &lt;/label&gt;
        &lt;input type="text" name="label" #label class="form-control" placeholder="Model's label"&gt;
      &lt;/div&gt;
      &lt;styles-dropdown&gt;&lt;/styles-dropdown&gt;
      &lt;colors-dropdown&gt;&lt;/colors-dropdown&gt;
      &lt;modes-dropdown&gt;&lt;/modes-dropdown&gt;
      &lt;shapes-dropdown&gt;&lt;/shapes-dropdown&gt;
      &lt;button type="submit" name="button"&gt;Create new model&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>-Parent <code>ts</code>:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  ...
  
  @Component({
    selector: 'models',
    templateUrl: 'app/models/models.component.html',
    directives: [
      StylesDropDownComponent,
      ...
    ]
  })
  export class ModelsComponent {
  
    constructor(){
    }
  
    submitNewModel(event, label) {
      event.preventDefault();
      console.log('Value label', label);
      console.log(event);
      //How do I get selected values here ?
    }
  }
  </code></pre>
  
  <p>-Drop down component HTML:</p>
  
  <pre><code>&lt;div class="portlet-body"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="styles" class="control-label"&gt; Style &lt;/label&gt;
      &lt;select name="style-select" id="styles" class="form-control select2"&gt;
        &lt;option value=""&gt;Select style&lt;/option&gt;
        &lt;option *ngFor="let style of styles" value="{{style.id}}"&gt;{{ style.label }}&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>-Drop down <code>ts</code>:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  import { ClientHttp } from '../../common/cigma-http';
  import { StylesComponent } from '../styles.component';
  
  @Component({
    selector: 'styles-dropdown',
    templateUrl: 'app/styles/styles-dropdown/styles.dropdown.component.html',
  })
  export class StylesDropDownComponent extends StylesComponent  {
    constructor(protected cigmaHttp: CigmaHttp) {
      super(cigmaHttp)
    }
  }
  </code></pre>
  
  <p>All other dropdown component have the same structure as the one above.</p>