MartinhoMCM

<div>
  <h1>Próximos Eventos do Angular</h1>
  <hr/>
  <div>
    <h2>{{event.name}}</h2>
    <div>Data: {{event.date}}</div>
    <div>Hora: {{event.time}}</div>
    <div>Preço: \${{event.price}}</div>
    <div>
      <span>Local: {{event.location.address}}</span>

MartinhoMCM

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

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

  constructor() { }

MartinhoMCM

<div>
  <h1>Próximos Eventos do Angular</h1>
  <h1>Olá {{message}}</h1>
  <hr/>
      <app-filho [event]="event" (outPutEvent)="handleClickedEvent($event)"></app-filho>
</div>

MartinhoMCM

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

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

  constructor() { }

MartinhoMCM

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

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

  @Input() event;