Angular2 How to subscribe to event in Component code?

Question

I have a [boolean] directive with an Output event:

@Output() booleanChanged = new EventEmitter();
...
this.booleanChanged.emit(value);

And in my view:

<input type="checkbox" [boolean] (booleanChanged)="updateBoolean()"/>

I would like to subscribe to this event from the component's code and not in the view.

Is there a way to do so?

score 1 · Accepted Answer · edited May 23 '17 at 11:54

1

@Output() events can only be used by (myoutput)="..." bindings.

You could emit a custom DOM event. DOM events bubble and can be listened to from parent components

class BooleanDirective {
  constructor(private elRef:ElementRef){}

  emitEvent() {
    final event = new CustomEvent('mycustomevent', {detail: 'abc', bubbles : true});
    this.elRef.nativeElement.dispatchEvent(event)
  }
}

@HostListener('mycustomevent', ['$event'])
myCustomEventHandler(event) {
  ...
}

See also angular2 manually firing click event on particular element

edited May 23 '17 at 11:54

Community

1
1

answered Jan 25 '17 at 06:40

Günter Zöchbauer

623,577
216
2,003
1,567

Is there a way to share this custom event in multiple directives? – naomi Jan 25 '17 at 06:56
What do you mean with "share" exactly? – Günter Zöchbauer Jan 25 '17 at 06:56
I want to fire the same event from multiple directives (and subscribe once) is it enough to just use the same name like 'mycustomevent'? – naomi Jan 25 '17 at 06:58
Exactly. It's only about the event name string to match. – Günter Zöchbauer Jan 25 '17 at 07:00
Sorry about that. You can just use `var`. I'm sure it will work. I don't use TypeScript myself, but expected it to work. – Günter Zöchbauer Jan 25 '17 at 08:25
"not working" is pretty vague. Do you get an error message? – Günter Zöchbauer Jan 26 '17 at 10:29
It works when I set the `bubbles` property of the `CustomEventInit` to true – naomi Jan 30 '17 at 08:54
I assumed it bubbles by default (didn't actually check). If it doesn't, then yes, you need to set it. – Günter Zöchbauer Jan 30 '17 at 08:55
@naomi thanks a lot for your feedback and the edit :) – Günter Zöchbauer Jan 30 '17 at 08:58

Angular2 How to subscribe to event in Component code?

1 Answers1