title: Angular: Getting data from child without event
body: <p>Using Angular 6 here. I have a page which has about 2 child components.
  The first one has 2 input text and the second one has one dropdown. My parent component just has the button click.</p>
  
  <p>I know I can use Eventemitter on my child component and pass the value to my parent but how shall I pass the value from my child if there are no button click events. I tried to user ViewChild which sort of works but there is a delay until the view is fully loaded. I am using ViewChild as below:</p>
  
  <p>--Parent--</p>
  
  <pre><code>import { Component, ViewChild, AfterViewInit } from '@angular/core';
  import { ChildComponent } from "../child/child.component";
  
  @Component({
    selector: 'app-parent',
    template: `
      Message: {{ message }}
      &lt;app-child&gt;&lt;/app-child&gt;
    `,
    styleUrls: ['./parent.component.css']
  })
  export class ParentComponent implements AfterViewInit {
  
    @ViewChild(ChildComponent) child;
  
    constructor() { }
  
    message:string;
  
    ngAfterViewInit() {
      this.message = this.child.message
    }
  }
  </code></pre>
  
  <p>--Child--</p>
  
  <pre><code>import { Component} from '@angular/core';
  
  @Component({
    selector: 'app-child',
    template: `
    `,
    styleUrls: ['./child.component.css']
  })
  export class ChildComponent {
  
    message = 'Hola Mundo!';
  
    constructor() { }
  
  }
  </code></pre>
  
  <p>I have taken the above ex from <a href="https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/" rel="nofollow noreferrer">https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/</a></p>
  
  <p>Could anyone provide inputs how I can achieve passing/reading data from child without having to use any button click/emitter. </p>
  
  <p>--Updated--</p>
  
  <p>--Child-- </p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'ct-child',
    templateUrl: './child.html'
  })
  export class ChildComponent implements OnInit {
    childmessage: string = "Child Message!"
    constructor() { }
  
    ngOnInit() {}
  }
  </code></pre>
  
  <p>--Parent--</p>
  
  <pre><code>import { Component, OnInit} from '@angular/core';
  
  @Component({
    selector: 'ct-parent',
    templateUrl: './parent.html'
  })
  export class ParentComponent implements OnInit  {
  
    constructor() { }
  
      message: string;
  
    getDataFromChild(child1): void {
      this.message = child1.message;    
    } 
  
  
    ngOnInit() {}  
  }
  </code></pre>
  
  <p>--Parent Html--</p>
  
  <pre><code> Message: {{message}}
   &lt;ct-child #child1&gt;&lt;/ct-metadata&gt;
   &lt;button type="button" (click)="getDataFromChild(child1)"&gt;Click Me!&lt;/button&gt;
  </code></pre>
  
  <p>I have tried above as per comments but this does not work.</p>