Angular 2 EventEmitter in Aurelia

4
votes

I'm working on porting some angular 2 code to Aurelia and for the most it's an easy task.

However, there is something I wonder about. In angular 2 custom elements I've seen references to:

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

and in an event handler:

    this.onChange.next(input.checked);

My question is: what would be the equivalent representation in aurelia?

br hw

2
javascriptangularaurelia

2 Answers

3
votes

Several ways you can do this, here's a couple examples:

Using @bindable

my-component.js

import {bindable} from 'aurelia-framework';

export class MyComponent {
  @bindable change;

  notifyChange() {
    this.change({ someArg: 'something', anotherArg: 'hello' });
  }
}

app.html

<template>
  ...
  <my-component change.call="handleChange(someArg, anotherArg)"></my-component>
  ...
</template>

app.js

export class App {
  handleChange(a, b) {
    ...
  }
}

Using DOM events

my-component.js

import {inject} from 'aurelia-framework';
import {DOM} from 'aurelia-pal';

@inject(Element)
export class MyComponent {
  constructor(element) {
    this.element = element;
  }

  notifyChange() {
    let detail = { someArg: 'something', anotherArg: 'hello' };        
    let eventInit = { detail, bubbles: true };
    let event = DOM.createCustomEvent('change', eventInit);
    this.element.dispatchEvent(event);
  }
}

note: DOM.createCustomEvent is not required. Use new CustomEvent(...) if you do not want to abstract away the DOM for testing purposes or otherwise.

app.html

<template>
  ...
  <my-component change.delegate="handleChange($event)"></my-component>
  ...
</template>

app.js

export class App {
  handleChange(event) {
    ...
  }
}
0
votes

For those interested: Based on @Jeremy answer i've gotten a framework for migrating primefaces components to aurelia:

rating.js

import {inject,bindable,noView,customElement} from 'aurelia-framework';
import 'jquery-ui';
import 'primeui'
import 'primeui/primeui-min.css!';

@customElement('p-rating')
@inject(Element)
@noView
export class Rating {
  @bindable value;
  @bindable disabled;
  @bindable readonly;
  @bindable stars;
  @bindable cancel = true;
  @bindable onrate;
  @bindable oncancel;

  constructor(element){
    this.element=element;
  }

  attached(){
    if(!this.stars){
      this.stars=5;
    }
   $(this.element).puirating({
     value: this.value,
     stars: this.stars,
     cancel: this.cancel,
     disabled: this.disabled,
     readonly: this.readonly,
     rate: (event: Event, value: number) => {
       if(this.onrate){
         this.onrate({originalEvent: event, value: value});
       } else {
         console.log('No onrate callback');
       }
     },
     oncancel: (event: Event) => {
       if(this.oncancel){
         this.oncancel({event});
       } else {
         console.log('No cancel callback');
       }
     }
   });
 }

 detached(){
   $(this.element).puirating('destroy');
 }
}

app.html:

<p-rating onrate.call="handleChange(originalEvent, value)" oncancel.call="handleCancel(event)">

Thanks again for giving a helping hand.

/hw