Pass parameters with EventEmitter

Question

I have a directive to initializes a jQueryUI sortable on a DOM element. The jQueryUI sortable also has a set of callback events that trigger on certain actions. For example, when you start or stop sorting elements.

I'd like to pass the return parameters from such an event through the emit() function, so I can actually see what happend in my callback function. I just haven't found a way to pass parameters through an EventEmiiter.

I currently have the following.

My directive:

@Directive({
    selector: '[sortable]'
})
export class Sortable {
    @Output() stopSort = new EventEmitter();

    constructor(el: ElementRef) {
      console.log('directive');
        var options = {
          stop: (event, ui) => {
            this.stopSort.emit(); // How to pass the params event and ui...?
          }
        };

        $(el.nativeElement).sortable(options).disableSelection();
    }
}

And this is my Component that uses the event emiited by the directive:

@Component({
  selector: 'my-app',
  directives: [Sortable],
  providers: [],
  template: `
    <div>
      <h2>Event from jQueryUI to Component demo</h2>

      <ul id="sortable" sortable (stopSort)="stopSort(event, ui)">
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
      </ul>
    </div>
  `
})
export class App {
  constructor() {

  }

  stopSort(event, ui) { // How do I get the 'event' and 'ui' params here?
    console.log('STOP SORT!', event);
  }
}

How can I get the event and ui params in my stopSort() function?

Here is a demo of what I have so far: http://plnkr.co/edit/5ACcetgwWWgTsKs1kWrA?p=info

Gettysburg

I'm not able to figure out what ui should be. Where does it come from? What should if refer to? – Hansom

Answer 1

EventEmitter supports one argument, which is passed as $event to your event handler.

Wrap your parameters in an event object when you pass it to emit:

this.stopSort.emit({ event:event, ui: ui });

Then, when you handle the event, use $event:

stopSort($event) { 
  alert('event param from Component: ' +$event.event);
  alert('ui param from Component: ' + $event.ui);
}

Demo Plnkr

Arrive

Just a small remark when using ES6 {event: event, ui: ui} can be shortened to {event, ui} – Shanahan

Just a small remark since I fought with that for an hour: You HAVE TO name the property $event in your method. Otherwise you get an undefined. – Helgahelge

Slightly off-topic but can anyone please explain about dollar($) sign? Why it's always use with EventEmiter parameter? – Polyhymnia

Answer 2

pixelbits answer have changed a bit with final release. If you have multiple parameters, just pass it through as one object.

Child component:

this.stopSort.emit({event,ui});

@Output() stopSort= new EventEmitter<any>();

Parent Component:

hereIsHeight(value) {
        console.log("Height = " + value.event); 
        console.log("Title = " + value.ui); 
    }   

HTML in parent component:

<test-child1 (stopSort)="hereIsHeight($event)"></test-child1>

-- Also if you have values like: (with the "this" in front)

this.stopSort.emit({this.event,this.ui});

they will not work, you need to change them to something else and then pass through like:

let val1 = this.event;
let val2 = this.ui;
this.stopSort.emit({val1,val2});

*Update: Read Colin B's answer below for a way to pass values with "this."

Logo

note: in <test-child1 (stopSort)="hereIsHeight($event)"></test-child1> you must use parameter name $event else it seems not working – Grebe

Answer 3

I can't add a comment, but just wanted to point out from Alpha Bravo's answer that you can pass this.event, you just can't use property value shorthand:

this.stopSort.emit({ event : this.event, ui : this.ui });

---

Also note, if they are passed through the EventEmmiter as this.stopSort.emit({ val1, val2 }); then they would be accessed in the parent as:

hereIsHeight(value) {
    console.log(`event = ${ value.val1 }`); 
    console.log(`ui = ${ value.val2 }`); 
}

So avoiding the shorthand might be preferable in this type of situation to keep naming consistent.

Microscopium

Answer 4

Works like this in child:

@Output() myEvent: EventEmitter<boolean> = new EventEmitter();
myFunc(value: boolean) {
    this.myEvent.emit(value);
}

Now you just have to grab the event in the parent!

Collocutor