How to subscribe after the emitting the event in Angular 2

Question

Following the steps provided in this answer - Angular2: Using routes, how to display the navigation bar after successfully logged in?

The event is emitted in the "promise" of login.component.ts and is expected to hit "subscribe" in the constructor of navbar.component.ts but it's not hitting. What am I missing? Below is the code:

Main.ts

import { bootstrap } from 'angular2/platform/browser';    
    // Our main component
    import { AppComponent } from './app.component';
    import { GlobalEventsManager } from './globaleventsmanager';
    import {ROUTER_PROVIDERS} from 'angular2/router';
    
    bootstrap(AppComponent, [GlobalEventsManager, ROUTER_PROVIDERS]);

App.component.ts

    import { Component } from 'angular2/core';
    import { LoginComponent } from './home/login.component';
    import { WelcomeComponent } from './home/welcome.component';
    import { HTTP_PROVIDERS }  from 'angular2/http';
    import { RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';
    import { TopNavbarComponent } from './navbar.component';
    
    @Component({
        selector: 'cmt-app',
        template: `<div class='container'>
                        <navbar></navbar>
                        <router-outlet></router-outlet>
                    </div>
                `,
        directives: [ROUTER_DIRECTIVES, TopNavbarComponent],
        providers: [HTTP_PROVIDERS]
    })
    
    @RouteConfig([
            { path: '*', name: 'Login', component: LoginComponent, useAsDefault: true },
            { path: '/welcome', name: 'Welcome', component: WelcomeComponent }
    ])
    
    export class AppComponent {
        
    }

GlobalEventsManager.ts

import { EventEmitter, Injectable } from "angular2/core";
import { IUserDetails } from "./home/login";

@Injectable()

export class GlobalEventsManager {
    public showNavBar: EventEmitter<boolean> = new EventEmitter();


    constructor() {

    }
}

Navbar.component.ts

     import {Component, ViewEncapsulation, OnInit} from "angular2/core";
    import {GlobalEventsManager} from "./globaleventsmanager";
    import { IUserDetails } from '././home/login';
    
    @Component({
        selector: "navbar",
        templateUrl: '/app/navbar.component.html',
        encapsulation: ViewEncapsulation.None
    })
    
    export class TopNavbarComponent {
        showNavBar: boolean = false;
        menuItems: IUserDetails[] = [];
    
        constructor(private globalEventsManager: GlobalEventsManager) {
            this.globalEventsManager.showNavBar.subscribe((data: boolean) => {
                console.log('reached');
                //this.menuItems.push(data);
                this.showNavBar = true;
                console.log(this.menuItems);
                //console.log(this.showNavBar);
            }, error => console.log(error));
    
        }
    }

Login.component.ts

import { Component, Output, EventEmitter } from 'angular2/core';
import { Http, Response, Headers, RequestOptions } from 'angular2/http';
import { Observable }  from 'rxjs/Observable';
import { CommonService } from '../services/common.service';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { IUserDetails } from '../home/login';
import { GlobalEventsManager } from './../globaleventsmanager';
import { Router } from 'angular2/router';

@Component({
    templateUrl: 'app/home/login.component.html',
    providers: [CommonService, GlobalEventsManager]
})

export class LoginComponent {
    private _commonServiceUrl = 'http://localhost:58116/api/common/initializemenuitems';

    constructor(private _router: Router, private _commonService: CommonService, private globalEventsManager: GlobalEventsManager) {
    }

    accountName: string = '';
    loginId: string = '';
    password: string = '';
    menuItems: IUserDetails[] = [];
    errorMessage: any[];

    loginUser(): void{
        this._commonService.loginUser(this.accountName, this.loginId, this.password, 'common', 'initializemenuitems')
            .subscribe(data => this.promise(data), error => this.errorMessage = <any>error);
    }

    private promise(data: IUserDetails) {
        this.globalEventsManager.showNavBar.emit(true);
        this._router.navigate(['Welcome']);

    }

    private handleError(error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

just a hunch, try removing GlobalEventsManager from providers in the LoginComponent — brando, Jul 28 '16 at 20:47
Yes it worked, thanks a ton. Why was it not working by having the "GlobalEventManager" in the list of providers? — user728630, Jul 29 '16 at 00:44

score 1 · Accepted Answer · answered Jul 29 '16 at 20:07

You inadvertently created a new instance of the GlobalEventsManager object, when you want to reference the singleton instance of GlobalEventsManager object that you created in the boostrap argument in Main.ts

Remove the reference to GlobalEventsManager from providers in the LoginComponent and it should work as expected.

How to subscribe after the emitting the event in Angular 2

1 Answers1

Linked