Angular 2 Beta0 - Cant get Event Emitters to work - events

Question

This is driving me nuts. I have an Angular2 application that I am trying to finish the login feature on. All I'm trying to do at this point is update the Navbar component template with the logged in users username when they login successfully. I am attempting to use EventEmitter to do this but the subscribe part never fires.
Everything builds/compiles OK - no errors. And the navbar does update, but only after a hard refresh. I'm trying to update it without the user needing to refresh
LoginService
#Injectable()
export class LoginService {
constructor(..., private userService: UserService) {
//
}
postLogin(f: ControlGroup) {
// Submits Login Form Etc.
// Calls UserService to 'Set User'
this.userService.setUser(user);
}
}
UserService
#Injectable()
export class UserService {
// My EventEmitter Here (I've tried without #Ouput() too)
#Output() userChange: EventEmitter<any> = new EventEmitter();
constructor() {
//
}
setUser(user: any) {
// Do some stuff with user
this.localStorage.setObject('user', user);
// Emit User Change Event (This logs to console OK)
console.log('Emitting User');
this.userChange.emit({ user: user });
}
}
NavBar Component
This is where I want to update User on Event Fire.
#Component({
selector: "navbar",
directives: [<any>RouterLink, <any>NgIf],
providers: [UserService],
template: require('./index.html'),
//... I've tried 'events:[], inputs:[], properties[] - No success
})
export class Navbar {
/**
* #type {}
*/
user: any = {};
constructor(private userService: UserService) {
let self = this;
// I expect this to log to console, but never does
userService.userChange.subscribe((data) => {
console.log('Caught Event');
self.user = data.user;
});
}
}
Navbar Template
<!-- User Authed Menu -->
<li *ngIf="loggedIn" class="nav-item dropdown">
<a class="nav-link dropdown-toggle" (click)="userDrop = !userDrop" href="#" role="button">
{{ user.username }}
</a>
<div class="dropdown-menu" [hidden]="!userDrop">
<a class="dropdown-item" [routerLink]="['./Login']" (click)="userDrop = !userDrop">Logout</a>
</div>
</li>
NavbarComponent is under an AppComponent as well, not sure if that matters.
I have also tried just updating a user object on the shared UserService and referencing it from nav component, but that wasn't working either. I have a fairly strong angular 1 background and I am still lost on why this isn't working. Any help would be really appreciated.

Answer 1

As discussed in the OP comments, because the NavBar component has providers: [UserService], it was injecting its own instance of the service.
Removing providers: [UserService] from the NavBar component and adding it further up the component tree allows multiple components to share one instance.
For something like a UserService, where you likely only want one instance, you can put providers: [UserService] in the root component, or specify the service in the call to bootstrap(AppComponent, [UserService]).