• 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

  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • How To Mock uuid In Jest
  • How To Decompile And Compile Android APK's On A Mac Using Apktool
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • Wild Natural Deodorant Review

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz