An error occurred: @Output not initialized

Question

I'm working on an angular app for managers to keep track of their teams, and I'm stuck with an @Output error :

An error occurred: @Output deleteMeeting not initialized in 'MeetingItemComponent'.

I have a Meetings component, generating a list of MeetingItem components. I want to perform actions when the user clicks on different buttons (edit, delete, show details).

Here is my parent Meetings template :

<div class="meeting__list" [@newMeeting]="meetings.length">
  <app-meeting-item
    *ngFor="let meeting of meetings"
    [meeting]="meeting"
    (deleteMeeting)="deleteMeeting($event)"
    (openMeetingDialog)="openMeetingDialog($event)"
    (messageClick)="openMessage($event)"
  ></app-meeting-item>
</div>

My MeetingItem template (only the part concerned by this post) :

<span class="meeting__actions">
    <mat-icon *ngIf="meeting.message" (click)="onMessageClick(meeting)" matTooltip="Read the message"
      matTooltipPosition="above" class="icon--notes">notes</mat-icon>
    <mat-icon (click)="onOpenMeetingDialog(meeting)" matTooltip="Edit this meeting" matTooltipPosition="above" class="icon--edit">edit</mat-icon>
    <mat-icon (click)="onDeleteMeeting(meeting.id)" matTooltip="Delete this meeting" matTooltipPosition="above" class="icon--delete">delete_outline</mat-icon>
  </span>

My MeetingItem component :

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

@Component({
  selector: 'app-meeting-item',
  templateUrl: './meeting-item.component.html',
  styleUrls: ['./meeting-item.component.scss']
})
export class MeetingItemComponent {

  @Input() meeting;

  @Output() deleteMeeting = new EventEmitter();
  @Output() openMeetingDialog = new EventEmitter();
  @Output() messageClick = new EventEmitter();

  constructor() {}

  onDeleteMeeting(meetingId) {
    this.deleteMeeting.emit(meetingId);
  }

  onOpenMeetingDialog(meeting) {
    this.openMeetingDialog.emit(meeting);
  }

  onMessageClick(meeting) {
    this.messageClick.emit(meeting);
  }
}

Provided code looks fine and would be easier to trace the issue if you can provide stackblitz demo. — Sunil Singh, Dec 05 '18 at 20:38

score 612 · Accepted Answer · answered Dec 05 '18 at 21:32

612

To make your code work in a stackblitz, I had to replace

import { EventEmitter } from 'events';

with

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

answered Dec 05 '18 at 21:32

ConnorsFan

70,558
13
122
146

79

A moment of silence for those who are here due to an auto import from VS code that imported `events` instead of `@angular/core`. – Pramesh Bajracharya Dec 02 '19 at 17:17

score 49 · Answer 2 · answered Nov 11 '19 at 18:10

49

Had the same error,

Import was correct like

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

But the variable definition was wrong:

@Output() onFormChange: EventEmitter<any>;

Should be:

@Output() onFormChange: EventEmitter<any> = new EventEmitter();

answered Nov 11 '19 at 18:10

Petro Darii

691
5
10

Yes. The same error occurs when EventEmitter isn't initialised with the component. I tried initialising it within a function (to reduce initial view load), but Angular won't have it. – Jai Nov 23 '19 at 13:11
For me I had to move the initialisation into the constructor. – FourtyTwo Feb 16 '22 at 18:37

score 5 · Answer 3 · edited May 19 '20 at 14:50

5

I had the same problem even importing from @angular/core.

The problem: I was initializing the EventEmmitter object in the ngOnInit method from my component class. Solution: I moved the initialization to the component's class constructor.

edited May 19 '20 at 14:50

BuZZ-dEE

6,075
12
66
96

answered Nov 11 '19 at 16:15

Leonardo Soares e Silva

199
3
7

mdmostafa · Answer 4 · 2021-06-29T09:31:52.173

5

I had also the same error. I found that Auto Import extension of VS Code did this. import * as EventEmitter from 'events'; is imported instead of import { EventEmitter } from '@angular/core';

So make sure if the import is ok or not.

edited Jun 29 '21 at 09:31

answered Jun 29 '21 at 08:55

mdmostafa

618
9
19

score 3 · Answer 5 · edited Aug 09 '19 at 15:46

3

In your component just use core angular module. Simply put this code at beginning of file.

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

edited Aug 09 '19 at 15:46

A_Arnold

3,195
25
39

answered Aug 09 '19 at 13:33

Sanket Gadade

63
2

9

Your answer seems a copy of part of ConnorsFan's answer. I think you should delete it – Fabrizio Aug 09 '19 at 13:55

score 3 · Answer 6 · answered May 31 '20 at 14:33

3

change the import : import { EventEmitter } from 'events'; with : import { EventEmitter } from '@angular/core';

answered May 31 '20 at 14:33

Ridha Hleli

31
3

add some explanation of what was wrong and how your solution works. – Abhishek Bhagate May 31 '20 at 18:29

score 2 · Answer 7 · edited May 19 '20 at 14:49

2

For me it works if I change below imports import { EventEmitter } from 'events';

to

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

edited May 19 '20 at 14:49

BuZZ-dEE

6,075
12
66
96

answered Dec 05 '19 at 03:36

score 2 · Answer 8 · answered Jul 28 '20 at 07:55

2

@Output() isAbout: EventEmitter<boolean> = new EventEmitter(); This should be the whole syntax to make it work you need the instance of the event emitter

answered Jul 28 '20 at 07:55

sai pavan

21
1

An error occurred: @Output not initialized

8 Answers8