title: Angular 2: Event not firing
body: <p>I'm trying to fire an event when my component gets the logged user from a service because I would like to show the navigation bar only when a user is logged in.</p>
  
  <p>Here's my app.component code:</p>
  
  <pre><code>import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
  import { ROUTER_DIRECTIVES, Router } from '@angular/router';
  import { LoginComponent } from './login.component';
  import { DashboardComponent } from './dashboard.component';
  import { ControlDetailComponent } from './control-detail.component';
  import { PageNotFoundComponent } from './pagenotfound.component';
  import { SettingsComponent } from './settings.component';
  import { UserService } from '../service/user.service';
  import { User } from '../object/user';
  
  @Component({
      selector: 'myApp',
      templateUrl: './app/template/app.component.html',
      styleUrls: ['styles.css'],
      directives: [ROUTER_DIRECTIVES],
      precompile: [LoginComponent, DashboardComponent, ControlDetailComponent, PageNotFoundComponent, SettingsComponent]
  })
  export class AppComponent {
      @Input() loggedUser:User;
      @Output() userChanged:EventEmitter&lt;User&gt; =  new EventEmitter&lt;User&gt;();
  
      constructor(private _userService:UserService, private _router:Router) {}
  
      ngAfterViewInit() { 
          if(this._userService.isUserLogged()) {
             this.userChanged.emit(this._userService.loggedUser);
         }
      }
  
      switchUser(event) {
          this.loggedUser = event.target.value;
          console.log("event triggered");
      }
  }
  </code></pre>
  
  <p><br/>
  And this is its associated template:</p>
  
  <pre><code>&lt;div class="all-content"&gt;
  &lt;nav (userChanged)="switchUser($event)" *ngIf="loggedUser"&gt;
      &lt;ul&gt;
          &lt;a [routerLink]="['/dashboard']" routerLinkActive="active"&gt;Dashboard&lt;/a&gt;
          &lt;a [routerLink]="['/settings']" routerLinkActive="active"&gt;Settings&lt;/a&gt;
          &lt;a (click)="logout()"&gt;Logout&lt;/a&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>
  <br/>
  </p>
  
  <p>Someone knows why my event is not fired?</p>
  
  <p>Initially I thought the problem was the <code>*ngIf</code> directive that was preventing the firing of the event but, even removing that, the event is not fired anyway... </p>