data transfer from ChildToParent via ViewChild() | Angular 4

Parent Component

import { Component, OnInit,ViewChild,AfterViewInit } from '@angular/core';

import { ChiledComponent} from '../chiled/chiled.component';

@Component({

selector: 'app-parent',

template: `<p>

Parent Component!{{message1}}

</p>

<app-chiled></app-chiled>`,

styleUrls: ['./parent.component.css']

})

export class ParentComponent implements AfterViewInit {

@ViewChild(ChiledComponent) child;

message1:string="Parent Message";

constructor() { }

ngAfterViewInit(){

this.message1 = this.child.message;

}

}

Child Component

import { Component, OnInit, Input,Output,EventEmitter } from '@angular/core';

@Component({

selector: 'app-chiled',

template: `<p>

child component :{{message}}

</p>

`,

styleUrls: ['./chiled.component.css']

})

export class ChiledComponent implements OnInit {

message: string="chiled Message";

constructor() { }

ngOnInit() {

}

}

Out Put:

Parent Component!chiled Message

child component :chiled Message