title: Angular2: Parent and Child Components Communication
body: <p>I'm trying to create a parent and child component where the child component is going to have a states drop down. Can someone help me understand how I can access the states drop down value in Parent Component? Here is my sample code. </p>
  
  <pre><code>/app/app.ts
  
  import {Component} from 'angular2/core'
  import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators} from 'angular2/common'
  import {State} from './state'
  
  @Component({
    selector: 'my-app',
    providers: [FormBuilder],
    templateUrl: 'app/app.html',
    directives: [State]
  })
  
  export class App {
    registrationForm: ControlGroup;
  
    state: State;
  
    constructor(fb: FormBuilder) {
  
      this.registrationForm = fb.group({
        'name': ['', Validators.required],
        'email': ''
      });
    }
  
    onSubmit() {
      alert('Entered Name: ' + this.registrationForm.value.name);
      alert('State Selected: '); //trying to alert the state selected in state component
    }
  }
  
  /app/app.html
  
  &lt;div&gt;
    &lt;h2&gt;Registration Form&lt;/h2&gt;
    &lt;form [ngFormModel]=registrationForm (ngSubmit)="onSubmit()"&gt;
      &lt;label&gt;Name: &lt;/label&gt;
      &lt;input type="text" ngControl="name"&gt;
      &lt;state&gt;&lt;/state&gt;
      &lt;button [disabled]="!registrationForm.valid"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  
  /app/state.ts
  import {Component} from 'angular2/core'
  import {FORM_DIRECTIVES, FormBuilder, ControlGroup} from 'angular2/common'
  
  @Component({
    selector: 'state',
    providers: [FormBuilder],
    templateUrl: 'app/state.html',
    directives: []
  })
  
  export class State {
  
    statesDropDownValues = ['NJ', 'NY', 'PA', 'CA'];
  
    stateForm: ControlGroup
  
    constructor(fb: FormBuilder) {
      this.stateForm = fb.group({
        'state': ''
      });
  
    }
  
    setStateValue() {
      alert('State Selected: ' + this.stateForm.value.state);
    }
  }
  
  /app/state.html
  &lt;div&gt;
    &lt;form [ngFormModel]="stateForm"&gt;
      &lt;label&gt;State: &lt;/label&gt;
      &lt;select ngControl="state" (change)="setStateValue()"&gt;
        &lt;option *ngFor="#s of statesDropDownValues"
            [value]="s"&gt;{{s}}
        &lt;/option&gt;
      &lt;/select&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Also plunker here <a href="http://plnkr.co/edit/8tsm9sYeH8d8ulfqQKxY?p=info" rel="nofollow">http://plnkr.co/edit/8tsm9sYeH8d8ulfqQKxY?p=info</a></p>