CODEWITHSUNDEEP
angularangular2-directives
Doua Beri
Doua Beri

Reputation: 10949

Angular 2 @Output does nothing

I'm trying to build a component that emits custom events. I'm not sure why the events are not triggered. If I look on browser developer tools, I can see that the events are attached to element.

I even tried to create the small example that is provided by the angular documentation: https://angular.io/docs/ts/latest/api/core/Output-var.html but with no luck.

Here is the small code:

import {Component} from "angular2/core";
import {Directive} from "angular2/core";
import {Output} from "angular2/core";
import {EventEmitter} from "angular2/core";
import {bootstrap}    from "angular2/platform/browser";

@Directive({
  selector: 'interval-dir',
})
class IntervalDir {
  @Output() everySecond = new EventEmitter();
  @Output('everyFiveSeconds') five5Secs = new EventEmitter();
  constructor() {
    setInterval(() => this.everySecond.emit("event"), 1000);
    setInterval(() => this.five5Secs.emit("event"), 5000);
  }
}
@Component({
  selector: 'app',
  template: `
    <interval-dir (every-second)="everySecond()" (every-five-seconds)="everyFiveSeconds()">
    </interval-dir>
  `,
  directives: [IntervalDir]
})
class App {
  everySecond() { console.log('second'); }
  everyFiveSeconds() { console.log('five seconds'); }
}
bootstrap(App);

No error is thrown , no console.log either.

Note: I'm using angular 2 - beta0

Am I missing something ? Thanks

Upvotes: 1

Views: 1005

Answers (1)

alexpods
alexpods

Reputation: 48505

Don't use kebab-case for events and properties anymore. Use camelCase:

@Component({
  selector: 'app',
  template: `
    <interval-dir 
        (everySecond)="everySecond()" 
        (everyFiveSeconds)="everyFiveSeconds()"
    ></interval-dir>
  `,
  directives: [IntervalDir]
})
class App { /* ... */ }

Upvotes: 8

Related Questions