title: Angular 2: How do I emit an event up through multiple nested components?
body: <p>I have one "smart" component called <strong>ItemsComponent</strong> and two nested "dumb" components, <strong>ItemsListComponent</strong> and <strong>ItemComponent</strong>.</p>
  
  <p><strong>ItemsComponent</strong>'s html template contains <strong>ItemsListComponent</strong>.</p>
  
  <pre><code>// ItemsComponent
  &lt;div&gt;
    // ItemsListComponent
    &lt;app-items-list
      [items]="items"
      (doDelete)="deleteItem($event)"
    &gt;
    &lt;/app-items-list&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>and it has a function called <strong>deleteItem</strong>:</p>
  
  <pre><code>deletItem(item) {
    // code to handle item deletion...
  }
  </code></pre>
  
  <p><strong>ItemsListComponent</strong> contains <strong>ItemComponent</strong>:</p>
  
  <pre><code>// ItemsListComponent    
  &lt;ul *ngFor="let item of items"&gt;
    // ItemComponent
    &lt;app-item
     [item]="item"
     (doDelete)="deleteItem($event)"
    &gt;
    &lt;/app-item&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>So the html structure is like this:</p>
  
  <pre><code>ItemsComponent (app-items)
      - ItemsListComponent (app-items-list)
          - ItemComponent (app-item)
  </code></pre>
  
  <p><strong>ItemComponent</strong> has a button</p>
  
  <pre><code>&lt;button (click)="deleteItem(item)"&gt;
  </code></pre>
  
  <p>and an event emitter for <strong>deleteItem</strong>:</p>
  
  <pre><code>@Output() doDelete = new EventEmitter();
  
  deleteItem(item) {
    this.doDelete.emit(item);
  }
  </code></pre>
  
  <p>When the delete button is clicked in <strong>ItemComponent</strong>, the event only bubbles up to it's immediate parent, <strong>ItemsListComponent</strong>, but doesn't make it to <strong>ItemsComponent</strong> unless I add identical event emitter functionality to the <strong>ItemsListComponent</strong>.</p>
  
  <p>Smelly <strong>ItemsListComponent</strong>:</p>
  
  <pre><code>@Output() doDelete = new EventEmitter();
  
  deleteItem(item) {
    this.doDelete.emit(item);
  }
  </code></pre>
  
  <p>It works this way, but <strong>ItemsListComponent</strong> now shares code smell with <strong>ItemsComponent</strong> since they both have the same event emitter stuff and the event has to be passed from one component to another on it's way up. </p>
  
  <p>Is there a better way to do this?</p>