title: Angular2 Output/emit() not working
body: <p>For the life of me I cannot figure out why I cannot either emit or capture some data. The <code>toggleNavigation()</code> fires, but I'm not sure if the <code>.emit()</code> is actually working.</p>
  
  <p>Eventually I want to collapse and expand the navigation, but for now I just want to understand how to send data from the <code>navigation.component</code> to the <code>app.component</code>.</p>
  
  <p><a href="https://plnkr.co/edit/wdZ8fRxXPkC1ik3y5NSA" rel="nofollow">Here is a Plunker link</a></p>
  
  <p><strong>app.component</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { PasNavigationComponent } from './shared/index';
  
  @Component({
      moduleId: module.id,
      selector: 'pas-app',
      template: `
            &lt;pas-navigation 
              (toggle)="toggleNavigation($event);"&gt;
            &lt;/pas-navigation&gt;
  
            &lt;section id="pas-wrapper"&gt;
                &lt;pas-dashboard&gt;&lt;/pas-dashboard&gt;
            &lt;/section&gt;              
      `,
      directives: [PasNavigationComponent]
  })
  
  export class AppComponent {
      toggleNavigation(data) {
      console.log('event', data);
      }
  }
  </code></pre>
  
  <p><strong>pas-navigation.component</strong></p>
  
  <pre><code>import { Component, Output, EventEmitter } from '@angular/core';
  
  @Component({
      moduleId: module.id,
      selector: 'pas-navigation',
      template: `
          &lt;nav&gt;
              &lt;div class="navigation-header"&gt;
                  &lt;i class="fa fa-bars" (click)="toggleNavigation()"&gt;&lt;/i&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      `
      })
  
  export class PasNavigationComponent {
  
      @Output('toggle') navToggle = new EventEmitter();
  
      toggleNavigation() {  
          this.navToggle.emit('my data to emit');
      }
  }
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>I added Pankaj Parkar's suggestions.</p>