@Output childEvent not initialized

Question

I am fairly new to the Angular world and working on angular 7, I am doing some examples where components share data within, The Parent to child part working fine but when i am trying to send any values from child to parent it's not working.

It shows me this error

app-component.html

<div>{{show}}</div>

<app-communicating-components [Parent]="message" (childEvent)="getMessage($event)"></app-communicating-components>

app-component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'AngularLesson2';

  public message = 'Hello my child, Parents here';
  public show: string;


  getMessage($event) {
    this.show = $event;
  }
}

communicating-components.component.html

<p>
  {{Parent}}
</p>
<button (click)="fireEvent()">Fire from child</button>

communicating-components.component.ts

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

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

  @Input() Parent;
  @Output() public childEvent = new EventEmitter();


  constructor() {
  }

  ngOnInit() {

  }

  fireEvent() {
    this.childEvent.emit('Hi, I am child');
    console.log("event fire" + this.childEvent);
  }

}

What am I doing wrong here?

Answer 1

I believe the problem is in your import import { EventEmitter } from 'events'; is not the one you should import here. Try changing the import to import { EventEmitter } from '@angular/core';

UPDATE

Here's a stackblitz example showing that it works