title: How to apply @ViewChildren in angular2 for communication between Parent and child
body: <p>i am trying to understand @ViewChildren() decorator. I created a Component called Component-A that accepts a user email address. Created the parent component called "component-B" that has twins( 2 Component-A's). Now i found online tutorials on how parent and child components can interract by incorporating Event and property binding by using @Input() and @Output() decorator. But how can one achieve the same result using @ViewChildren() where we check if both emails entered are the same and print out they match?</p>
  
  <pre><code>@Component({
      selector: 'component-A'
      styleUrls: [],
      templateUrl: `&lt;form&gt;
                     &lt;div&gt;
                       &lt;fieldset&gt;
                       &lt;legend&gt;Component A&lt;/legend&gt;
                         &lt;div class="form-horizontal"&gt;
                            &lt;div class="form-group"&gt;
                              &lt;label for="inputEmail3" class="col-sm-2 control-label"&gt;Email&lt;/label&gt;
                               &lt;div class="col-sm-10"&gt;
        &lt;input type="email" class="form-control" id="inputEmail3" placeholder="Email"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/fieldset&gt;
  })
  
    export class ComponentA {
  
    }
  </code></pre>
  
  <p>Now i have a componentB:</p>
  
  <pre><code>@Component({
      selector: 'component-B',
      styleUrls: [],
      templateUrl: `
                    &lt;form&gt;
                      &lt;div&gt;
                        &lt;fieldset&gt;
                          &lt;legend&gt;Parent Component&lt;/legend&gt;
                            &lt;div class="form-horizontal"&gt;
                              &lt;div class="form-group"&gt;
                                &lt;label for="1" class="col-sm-2 control-label"&gt;1&lt;/label&gt;
                                 &lt;div class="col-sm-10"&gt;
                                     &lt;component-A&gt;&lt;/component-A&gt;
                                 &lt;/div&gt;
  
                                &lt;div class="form-group"&gt;
                                &lt;label for="2" class="col-sm-2 control-label"&gt;2&lt;/label&gt;
                                 &lt;div class="col-sm-10"&gt;
                                     &lt;component-A&gt;&lt;/component-A&gt;
                                 &lt;/div&gt;
                           &lt;/div&gt;
                       &lt;/div&gt;
                 &lt;/fieldset&gt;
              &lt;/div&gt;
           &lt;/form&gt;
  })
  
     export class Parent {
  }
  </code></pre>