Rob Rob - 2 months ago 43
TypeScript Question

Angular2 EventEmitter Not working and no errors

I am trying to emit a simple event and I cant get it to work.

import {Component, Input, Output, EventEmitter} from '@angular/core'
import {MenuService} from "./menu.service";


@Component({
selector:'side-menu',
templateUrl:'component.html',
})

export class SideMenuComponent {

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

//Show and Hide the Detail Pane
detailPanePinned = false;
detailPaneVisible = false;

pinMenuClick(){
this.detailPanePinned = !this.detailPanePinned;
this.detailPaneVisible = !this.detailPaneVisible;

this.pinnedChange.emit({
detailPanePinned: this.detailPanePinned
})

}

}


Here is the HTML were I am trying to listen for it

<side-menu class="side-block pull-left">

</side-menu>
<design-pane (change)="onPinnedChange($event)"></design-pane>
<side-menu class="side-block pull-right">
</side-menu>


And here is the Component for the html above

import {Component} from '@angular/core'

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

export class BuilderLayoutComponent {

onPinnedChange($event){
console.log($event)
}
}


When I click
pinMenuClick
I dont get any error. It just doesnt hit my
onPinnedChange()


I am using the Angular2 2.0.0 official

Answer

I believe that only the component that emits the event can listen to it, in your case, the side-menu. So you need to do something like this:

<side-menu (pinnedChange)="onPinnedChange($event)"></side-menu>