EventEmitter parameter value undefined for listener

I was trying to use EventEmitter to emit custom events and to handle show/hide components in the AppComponent based on the menu item/link that was clicked in the header. In the parent component EventEmitter parameter value undefined for listener.

EventEmitter parameter value undefined for listener

The parent component was listening for the event “menuItemSelected” as shown below.

app.component.html

<app-header (menuItemSelected)="onNavigate($event)"></app-header>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <app-recipes *ngIf="loadedPage === 'recipes'"></app-recipes>
            <app-shopping-list *ngIf="loadedPage === 'shopping-list'"></app-shopping-list>             
        </div>
    </div>
</div>

app.component.ts

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

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

  loadedPage = 'recipes';

  onNavigate(page: string){
    console.log ("Page :: " + page);
    this.loadedPage = page;
  }
}

header.component.ts

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

@Component({
   selector:'app-header',
   templateUrl: './header.component.html'
})

export class HeaderComponent {
   collapsed = true;

   @Output() menuItemSelected = new EventEmitter<string>();

   onSelect(menuItem: string) {
      console.log("Menu Selected :: " + menuItem);
      this.menuItemSelected.emit();
   }

}

For instance, I was getting page :: undefined in the console log which indicates that EventEmitter parameter value is undefined for listener.

Angular is running in the development mode. Call enableProdMode() to enable the production mode.
client:52 [WDS] Live Reloading enabled.
header.component.ts:15 Menu Selected :: recipes
app.component.ts:13 Page :: undefined
header.component.ts:15 Menu Selected :: shopping-list
app.component.ts:13 Page :: undefined

header.component.html

<nav class="navbar navbar-default"> 
    <div class="container-fluid">
        <div class="navbar-header">
                <button type="button" class="navbar-toggle" (click)="collapsed = !collapsed">
                  <span class="icon-bar" *ngFor="let iconBar of [1, 2, 3, 4]"></span>
                </button>
                <a routerLink="/" class="navbar-brand">Myrecipes.com</a>
        </div>
        <div class="navbar-collapse" [class.collapse]="collapsed" (window:resize)="collapsed = true">

            <ul class="nav navbar-nav">
                <li><a href="#" (click)="onSelect('recipes')">Recipes</a></li>
                <li><a href="#" (click)="onSelect('shopping-list')">Shopping List</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" role="button">Manage <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Save Data</a></li>
                        <li><a href="#">Fetch Data</a></li>
                    </ul>
                </li>
            </ul>
            
        </div>
    </div>
</nav>

Solution: EventEmitter parameter value undefined for listener

Note, menuItem should be there as an argument for emit() method for the event “menuItemSelected” which was missed in my case. After, adding “menuItem” argument the undefined error gone away.

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


@Component({
   selector:'app-header',
   templateUrl: './header.component.html'
})

export class HeaderComponent {
   collapsed = true;

   @Output() menuItemSelected = new EventEmitter<string>();

   onSelect(menuItem: string) {
      console.log("Menu Selected :: " + menuItem);
      this.menuItemSelected.emit(menuItem);
   }

}

That’s it. Hope you had learnt how to resolve parent component EventEmitter parameter value undefined error for listener.

Hope it helped 🙂

EventEmitter parameter value undefined for listener

Solution: EventEmitter parameter value undefined for listener

References: