title: Proper way to use Angular EventEmitter
body: <p>In my simplified scenario there is a <code>parent</code> component, which contains all the business logic.</p>
  <p>The <code>parent</code> creates a <code>child</code> component which is only responsible to display a list of buttons.</p>
  <p>I want to handle the click events for such buttons in the <code>parent</code>, but, using the suggested <code>EventEmitter</code> pattern I'm forced to use a useless <code>switch case</code> in the <code>parent</code>, in order to detect which button is pressed.</p>
  <p>It would be much easier to directly pass the callbacks as input of the <code>child</code>, but I think it's not a good practice. Also these callbacks, as far as I can see, are executed in the context of the child, which is not the desired outcome.</p>
  <p>Am I missing something? Is there a better way to achieve my needs? Or I'm completely approaching the problem in a wrong way?</p>
  <p><strong>The parent:</strong></p>
  <pre><code>import { Component } from &quot;@angular/core&quot;;
  
  @Component({
    selector: &quot;parent&quot;,
    template: ` &lt;child
        [buttons]=&quot;buttons&quot;
        (click)=&quot;onButtonClick($event)&quot;
      &gt;&lt;/child&gt;
      &lt;span&gt;{{ description }}&lt;/span&gt;`
  })
  export class ParentComponent {
    description = &quot;&quot;;
    buttons = [&quot;foo&quot;, &quot;bar&quot;, &quot;baz&quot;];
  
    onButtonClick(button: string) {
      switch (button) {
        case &quot;foo&quot;:
          this.description = &quot;Calling foo()&quot;;
          this.foo();
          break;
        case &quot;bar&quot;:
          this.description = &quot;Calling bar()&quot;;
          this.bar();
          break;
        case &quot;baz&quot;:
          this.description = &quot;Calling baz()&quot;;
          this.baz();
          break;
      }
    }
  
    foo() {}
    bar() {}
    baz() {}
  }
  </code></pre>
  <p><strong>The child:</strong></p>
  <pre><code>import { Component, EventEmitter, Input, Output } from &quot;@angular/core&quot;;
  
  @Component({
    selector: &quot;child&quot;,
    template: ` &lt;span *ngFor=&quot;let button of buttons&quot;&gt;
      &lt;button (click)=&quot;onClick(button)&quot;&gt;{{ button }}&lt;/button&gt;
    &lt;/span&gt;`
  })
  export class ChildComponent {
    @Input() buttons: string[];
  
    @Output() click = new EventEmitter&lt;string&gt;();
  
    onClick(button: string) {
      this.click.emit(button);
    }
  }
  </code></pre>
  <p><strong>And a working <a href="https://codesandbox.io/s/xenodochial-parm-dj35og?file=/src/app/child.component.ts" rel="nofollow noreferrer">sandbox</a>.</strong></p>