Angular pass parameter to parent component via @Output()

Question

I have two components, let's call them contianer and itemList. The itemList has clickable items, and I need to pass click events (including the index of the clicked item) to the container.

itemList.ts:

...
@Output()
itemClicked = new EventEmitter<number>();

@Output()
somethingElse = new EventEmitter<void>();

...
this.itemClicked.emit(index);
...
this.somethingElse.emit();
...

container.html:

...
<itemList (itemClicked)="itemClicked($index)"
          (somethingElse)="somethingElse()" ... >
  ...
</itemList>
...

container.ts:

...
itemClicked(observer: Observer<number>): void {
  // where do I get the index from ?
  console.debug('itemClicked( #' + index + ')');
}

somethingElse(observer: Observer<void>): void {
  console.debug('somethingElse()');
}
...

The question is in container.ts: where do I get the index from ?

The events from somethingElse are successfully passed to the container, so this can't be totally wrong. And in fact, this is the pattern I'm trying to build the itemClicked upon. But I could not change the signature of itemClicked(...) to a correct and working version.

I would use a shared service to send data (index in your case) from one component to another. Check this: http://stackoverflow.com/questions/44066905/angular-2-send-data-from-component-to-service/44067238#44067238 I hope it can be helpful! — SrAxi, May 19 '17 at 10:56
By the way you should name your @Output as verbs like `@Ouput() clicked` then you can access the event with a call back named "on" like ``. It will make it easier for you to keep track of what is an output and what is a callback. — mikias, May 19 '17 at 11:01

score 6 · Accepted Answer · answered May 19 '17 at 10:58

I believe your issue is in the container template where you're trying to pick up $index which doesn't exist. You should use $event.

...
<itemList (itemClicked)="itemClicked($event)"
      (somethingElse)="somethingElse()" ... >
  ...
</itemList>

...

That should allow you to access the value you emit from itemClicked. Then in your container component you can access the index in it's itemClicked function:

...
itemClicked(index: number): void {
  // the index will appear here
  console.debug('itemClicked( #' + index + ')');
}

somethingElse(): void {
  // You didn't pass any argument here
  console.debug('somethingElse()');
}
...

Note that the argument is the index itself and not an observable.

Hope that helps. Good luck.

OK, that works. And I just found out that I don't need the observer ... had picked a bad example from somewhere else. — Markus N., May 19 '17 at 11:05

score 0 · Answer 2 · answered May 19 '17 at 10:59

Arguments that you receive in Output are called custom events. So you need to receive $event and that event will be of same type as you passed from child component.

<itemList (itemClicked)="itemClicked($event)"
          (somethingElse)="somethingElse()" ... >
  ...
</itemList>

itemClicked(index: number): void {
  console.debug('itemClicked( #' + index + ')');
}

Angular pass parameter to parent component via @Output()

2 Answers2