@Input и @Output всегда не определены в Angular 5

Независимо от того, какие значения внутри индивидов печатаются без проблем, но все, что получено с помощью @Input или @Output, отображается неправильно.

Я пытаюсь назначить childData в child.component.ts с родительским свойством parentData.

Аналогичным образом я пытаюсь присвоить дочерние свойства "данные" родительским свойствам "данные",

child.component.ts

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input() public childData: string;
  @Output() public event: EventEmitter<string> = new EventEmitter();
  public data = 'Harsha';
  constructor() { }

  onClick() {
    console.log("sending value to parent:"+this.data);
    this.event.emit(this.data);
  }

  ngOnInit() {
  }

}

parent.component.ts

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  public parentData = 'Hello Parent';
  public data: string;

  constructor() { }

  onOutputEvent(data: string){
    console.log("in parent:"+data);
    this.data = data;
  }

}

<!-- child.component.html -->
<h3>Printing parent value in child component: {{childData}}</h3>

<h4>Printing child value:{{data}}</h4>

<button (click)="onClick()">Send value to parent</button>

<!-- parent.componnt.html -->
<h3>Printing parent Data: {{parentData}}</h3>
<h4>Printing child Data: {{data}}</h4>

<app-child> [childData]="parentData" (event)="onOutputEvent($event)"</app-child>

<!-- app.component.html -->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

<app-parent></app-parent>