title: Child To Parent Value access using ViewChild
body: <p>I have read about articles in angular6, 3 ways to communicate in  child to parent.if its wrong,please demonstrate if possible
  1)output emitter
  2)using viewchild
  3)shared Service.</p>
  
  <p>So here i need to understand how to communicate the viewchild from child to parent.</p>
  
  <p>In below demo, have created a form in child component,when child component form is valid, that should be reflected in parent component.In this demo when components gets loaded in ngafterViewInit hook the view child value , its working as expected , but when  type some thing , child component form  is valid,button enabled in child form ,those changes not reflected in  the parent component  which needs to valid , but its not working as expected. can anyone give the best approach?</p>
  
  <p>parent component.html</p>
  
  <pre><code>&lt;h1&gt; Parent Component&lt;/h1&gt;
  
  &lt;button class="btn btn-danger " disabled="{{check}}"&gt;CheckParentEnable&lt;/button&gt;
  &lt;div class="childComponent"&gt;
  &lt;app-child-component&gt;&lt;/app-child-component&gt;
   k2
    &lt;/div&gt;
  </code></pre>
  
  <p>parent component.html</p>
  
  <pre><code>import { Component, ViewChild, AfterViewInit } from '@angular/core';
  import { ChildComponent } from './child/child.component';
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements AfterViewInit {
  
    public check: boolean;
    @ViewChild(ChildComponent) myname: ChildComponent;
  
  
    constructor() {
  
    }
    ngAfterViewInit() {
      this.check = this.myname.loginForm.valid;
    }
  
  }
  </code></pre>
  
  <p>Child.component.html</p>
  
  <pre><code>&lt;h4&gt;childComponentArea&lt;h4&gt;
  
    &lt;h1&gt;Welcome to child component&lt;/h1&gt;
  
  
  &lt;form [formGroup]="loginForm"&gt;
  
  &lt;input type="email" formControlName="email" placeholder="Email" &gt;
  
  &lt;button class="btn btn-danger" [disabled]="loginForm.invalid"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>child.component.ts</p>
  
  <pre><code>import { Component, EventEmitter, Input,Output, OnInit } from '@angular/core';
  import { FormControl, FormGroup,Validators } from '@angular/forms';
  @Component({
    selector: 'app-child-component',
    templateUrl: './child.component.html',
    styleUrls: ['./child.component.css']
  })
  export class ChildComponent implements OnInit {
    loginForm:FormGroup;
    name:string ='sahir';
    constructor() { }
  
    ngOnInit() {
      this.createForm();
    }
  
  
   private createForm() {
      this.loginForm = new FormGroup({
        // tslint:disable-next-line
        email: new FormControl('', [Validators.required])
  
      });
    }
  
    k8
  
  }
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/angular6-viewchild?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">demo</a></p>