data transfer from ChildToParent | Angular 4

Parent Component

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

@Component({

selector: 'app-parent',

template: `<p>

parent works!Message comming from chilked{{messageChiledToParent}}

</p>

<app-chiled (messageEvent)="resiveMessage($event)"></app-chiled>`,

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

})

export class ParentComponent implements OnInit {

messageParentToChiled = "Parent to parent";

messageChiledToParent:string;

constructor() { }

ngOnInit() {

}

resiveMessage($event){

this.messageChiledToParent=$event;

}

}

Child Component

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

@Component({

selector: 'app-chiled',

template: `<p>

chiled works!

<input type="button" (click)="sendMessage()" value="click me!"/>

</p>

`,

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

})

export class ChiledComponent implements OnInit {

@Input() messageParentToChiled:string;

MessageChiledToParent: string="chiled to parent";

@Output() messageEvent=new EventEmitter<string>();

constructor() { }

ngOnInit() {

}

sendMessage(){

this.messageEvent.emit(this.MessageChiledToParent);

}

}