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

@Component({
  selector: 'Menu',
  templateUrl: `
  <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>`,
  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
  };

}

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

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

@Component({
  selector: 'app-root',
  templateUrl: `
  <div>
  <Menu (pick)="onPick($event)"></Menu>
  <div style="text-align:center">
    <h1>{{ title }}!</h1>
  </div>
  <Map></Map>
</div>`
,
  styleUrls: ['app.css'],
})
export class App {
  title: string = 'My webapp';

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