• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

The Equivalent of Angular 2 EventEmitter In Aurelia

Aurelia 1, Javascript · February 7, 2016

If you are like me, you browse Github for cool new repositories. My new hobby is looking at what the community are building for rival frameworks and one of those frameworks is Angular 2.

The Angular 2 community has done a great job of porting over not only existing libraries from Angular 1, but also creating new ones. There are some that are not available for Aurelia, but fortunately there is quite a lot of overlap between the two frameworks in ECMAScript and TypeScript syntax.

I recently encountered in one Angular 2 library the use of EventEmitter, you might be forgiven for thinking this is similar to Aurelia’s pub/sub event aggregator, but it is not. The EventEmitter is essentially a wrapper around native events you might create using the new CustomEvent(...) constructor. Really it is more akin to Aurelia’s @bindable decorator, both can do the same thing.

In the following example we create a DOM event and further down we use @bindable functionality to also mimic an EventEmitter action.

    import {inject} from 'aurelia-framework';

    @inject(Element)
    export default class MyCustomSomething {
        private element: Element;

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

        dispatchChange() {
            let detail    = {myArg: 'some value'};
            let eventInit = {detail, bubbles: true};
            let event = new CustomEvent('change', eventInit);
            this.element.dispatchEvent(event);
        }
    }

But wait, there is more. Another more straightforward approach is using the @bindable decorator functionality in an Aurelia class. A bindable on a class can actually be called as a function to trigger it like an event.

    import {inject, bindable, customElement} from 'aurelia-framework';

    @inject(Element)
    @customElement('my-el')
    export default class MyCustomSomething {
        private element: Element;
        
        @bindable someattr;
        // The above written in Angular 2 style:
        // @Output() someAttr: EventEmitter<any> = new EventEmitter();

        constructor(element: Element) {
            this.element = element;
        }
        
        attached() {
            this.someattr({myVar1: 'myVar', myVar2: 'anotherVal'});
            // The above written in Angular 2 style:
            //  this.someAttr.next({ myVar1: 'myVar', myVar2: 'anotherVal' });
        }
    }

Using the above custom element example, we have an attribute on our custom element called someattr which we can use to call another function when it is triggered. Obviously we wouldn’t trigger an event inside of attached() this is just an example.

<template>
<my-el someattr.call="handleEventChange(myVar1, myVar2)"></my-el>
</template>

Conclusion

Anything that Angular 2 can do, it seems Aurelia can do it more succinctly. While EventEmitter is one of the least confusing aspects of Angular I have seen, I think a native event or @bindable gets the job done a lot easier.

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Which Neural DSP Archetype Plugins Should You Buy?
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • How To Mock uuid In Jest
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • Deno Raises $21M - but is anyone using it yet?
  • Web 3.0 may have died before it even started
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex

Recent Comments

  • Jay on Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • john on Deno Raises $21M – but is anyone using it yet?
  • Oranges on How To Store Users In Firestore Using Firebase Authentication
  • Precious on Fixing Sequel Pro SQL Encoding Error For Imported SQL Files
  • James on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz