Output event in components not working

Well, im trying to have an output event with my components, but i cant put it to work.

Here is the essencial part of my code:


  templateUrl: "app/components/rune-simulator/rune-simulator.html",
  selector: 'rune-simulator',
  directives: [MonsterInfoComponent]

export class RuneSimulator {


  onUpdate(value) {


<monster-info (monsterstars) = "onUpdate($event)" > </monster-info>


  templateUrl: "app/components/monster-info/monster-info.html",
  selector: 'monster-info'

export class MonsterInfoComponent {
  @Output() monsterstars = new EventEmitter();

  onChangedMonsterStars(value) {
    console.info("mi", value);


<img (click)="onChangedMonsterStars(2)">

I have some input working with they, but i didnt put it here because i dont think it is necessary, but i cant put the output to work.

Anyone have any idea?

if i see it correct --> you are firing an event… but you are not listening --> read about the subscribe-method of an observable

if you want to share more data between components --> use services

he is trying to bubble the event up to the parent component… At least that was my interpretation of the question

<monster-info (monsterstars) = "onUpdate($event)" > </monster-info>

@aaronksaunders You are right, i have a very similar code working with EventEmitter binding a value to the parent component.

@rodrigoreal Could you check this?:

  1. Did you inject Output and EventEmitter from 'angular2/core'?
  2. Does onChangedMonsterStars(2) logs 'mi' and value to console?
  3. Try deleting the spaces around the = in the html event (monsterstars)="onUpdate($event)".
  4. Try using emit() instead of next().
  5. After all above, is there any error in the console?

I’m really sorry for the trouble, but this code is working.
I was doing another mistake when i was injecting the components.