I&#39;m working on an angular app for managers to keep track of their teams, and I&#39;m stuck with an @Output error :

    An error occurred: @Output deleteMeeting not initialized in &#39;MeetingItemComponent&#39;.

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 :

    &lt;div class=&quot;meeting__list&quot; [@newMeeting]=&quot;meetings.length&quot;&gt;
      &lt;app-meeting-item
        *ngFor=&quot;let meeting of meetings&quot;
        [meeting]=&quot;meeting&quot;
        (deleteMeeting)=&quot;deleteMeeting($event)&quot;
        (openMeetingDialog)=&quot;openMeetingDialog($event)&quot;
        (messageClick)=&quot;openMessage($event)&quot;
      &gt;&lt;/app-meeting-item&gt;
    &lt;/div&gt;

My MeetingItem template (only the part concerned by this post) :

    &lt;span class=&quot;meeting__actions&quot;&gt;
        &lt;mat-icon *ngIf=&quot;meeting.message&quot; (click)=&quot;onMessageClick(meeting)&quot; matTooltip=&quot;Read the message&quot;
          matTooltipPosition=&quot;above&quot; class=&quot;icon--notes&quot;&gt;notes&lt;/mat-icon&gt;
        &lt;mat-icon (click)=&quot;onOpenMeetingDialog(meeting)&quot; matTooltip=&quot;Edit this meeting&quot; matTooltipPosition=&quot;above&quot; class=&quot;icon--edit&quot;&gt;edit&lt;/mat-icon&gt;
        &lt;mat-icon (click)=&quot;onDeleteMeeting(meeting.id)&quot; matTooltip=&quot;Delete this meeting&quot; matTooltipPosition=&quot;above&quot; class=&quot;icon--delete&quot;&gt;delete_outline&lt;/mat-icon&gt;
      &lt;/span&gt;

My MeetingItem component :

    import { Component, Input, Output } from &#39;@angular/core&#39;;
    import { EventEmitter } from &#39;events&#39;;
    
    @Component({
      selector: &#39;app-meeting-item&#39;,
      templateUrl: &#39;./meeting-item.component.html&#39;,
      styleUrls: [&#39;./meeting-item.component.scss&#39;]
    })
    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);
      }
    }

All Angular Event-Emitter Solutions on Gang of Coders

Total of 1 Angular Event-Emitter Solutions

An error occurred: @Output not initialized