angular 5 EventEmitter give nothing

Question

Please, help me understand why EventEmitter in my example won't work. I can't see mistakes in my code, but still it won't work. I have no errors and no effect.

app.menu.ts (child component):

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

@Component({
  selector: 'Menu',
  templateUrl: app.menu.html,
  styleUrls: ['app.menu.css'],
})

export class Menu {

  @Output() pick = new EventEmitter<any>();

  hidden: boolean = true;
  items: object[] = [
    {action: 'login', text: 'zaloguj się'},
    {action: 'halls', text: 'hale sportowe'},
    {action: 'sweemingPools', text: 'baseny'},
  ];

  constructor() {}

  toggler() {
    this.hidden = !this.hidden;
  };

  displayMarkers(type:string){
    console.log('test1', type); //work correctly
    this.pick.emit(type); //won't work
  };

}

child template:

  <div>
   <button (click)="toggler()">MENU</button>
   <div id="left-menu" [hidden]="hidden">
    <ul>
      <li *ngFor="let item of items"><a (click)=displayMarkers(item.action)>{{ item.text }}</a></li>
    </ul>
  </div>
 </div>

app.ts (parent component):

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

import { Menu } from './menu/app.menu';
import { Map } from './map/app.map';

@Component({
  selector: 'app-root',
  templateUrl: 'app.html',
  styleUrls: ['app.css'],
})
export class App {
  title: string = 'My webapp';

  onPick(event:string){
    console.log('test2', event); //nothing, won't work
  }
}

parent template:

  <div>
  <Menu (pick)="onPick($event)"></Menu>
  <div style="text-align:center">
    <h1>{{ title }}!</h1>
  </div>
  <Map></Map>
</div>

This is really simple code and I saw several similar examples. So it should work. And please, don't send me to different topicks, because I saw they really lot. I think onPick function never run, but why? What is wrong?

Answer 1

Add your Menu Component to the app.module.ts declarations property like so:

import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from './app.component';
import { ChildComponent } from './app-child-component';
import {Menu} from './menu.component.ts';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent, ChildComponent, Menu ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Then in your parent component:

import {Component} from '@angular/core'

@Component({
  selector: 'app-child-component',
  template: `
    <Menu (pick)=onPick($event)></Menu>
  `,
})
export class ChildComponent {
  onPick(e) { console.log('picked'); alert('picked')};
}

and your component:

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

@Component({
  selector: 'Menu',
  template: `
  <div>
  test
   <button (click)="toggler()">MENU</button>
   <div id="left-menu" [hidden]="hidden">
    <ul>
      <li *ngFor="let item of items"><a (click)="displayMarkers(item.action)">{{ item.text }}</a></li>
    </ul>
  </div>
 </div>`
})

export class Menu {

  @Output() pick = new EventEmitter<any>();

  hidden: boolean = true;
  items: object[] = [
    {action: 'login', text: 'zaloguj się'},
    {action: 'halls', text: 'hale sportowe'},
    {action: 'sweemingPools', text: 'baseny'},
  ];

  constructor() {}

  toggler() {
    this.hidden = !this.hidden;
  };

  displayMarkers(type:string){
    console.log('test1', type); //work correctly
    this.pick.emit(type); //won't work
  };

}