Data passing using input output with component Angular 6-7

<div style="background-color: orange; color:white;padding: 20px;">
  <p>Parent Component: </p>
  <h1>{{name}}</h1>
  <h1>{{backName}}</h1>
  <div style="background-color: blue; color:white;padding: 20px;">
    <hello [firstName]="name" (myEvent)="callFunction($event)"></hello>
  </div>
</div>

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Paresh Gami';
  backName = '';
  callFunction(e) {
    this.backName = e.name;
  }
}

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

@Component({
  selector: 'hello',
  template: `Child ComponentHello {{firstName}}!Send Back`,
  styles: [`h1, p { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() firstName: string;
  @Output() myEvent = new EventEmitter();

  sendBack() {
    this.myEvent.emit({name: 'Back.! ' + this.firstName});
  }
}