Angular 2: Displaying icons in navbar on authentication

Question

My component structure looks roughly like this. My app component has a nav bar and router outlet. The nav bar has logo, some generic links and some specific links to be shown on user login and authentication only. The router outlet loads the home component or the wall component based on the routing url. The home component contains the login component which contains the customary user id, password and submit button. On submit, and upon successful login, the login component emits an event. Now, how do I catch that event in the home component (parent)?

If I were to use the home selector directly under app, I could catch the event, bubble it up to app and then make the hidden links in the nav bar visible.

I am unaware how to catch the event emitted by login component in home component since it is loaded in the router output.

<!-- app.html -->
<div>
  <nav>
    <!-- Product logo -->
    <!-- Some generic links -->
    <!-- some hidden icons to be shown on authentication -->
  </nav>
  <router-outlet></router-outlet>
</div>

<!-- home.html -->
<div>
  <login></login>
</div>

<!-- login.html -->
<div>
  <!-- user name and password -->
  <!-- submit button - the associated ts file raises an event on successful login -->
</div>

<!-- wall.html -->
<div>
  <!-- Content to be displayed on authentication -->
</div>

Thanks, Shilpa

Why not create a an auth service that you inject into both components. In the auth service, you setup an event emitter that you fire when authenticating. Any component that inject your service should be able to subscribe to the event from your auth service — Matthew Brown
Matthew, thanks very much. If you could please provide sample code for subscribing to the event emitted by the service, that would be most helpful. — Shilpa Nagavara
I tried all answers provided by Mark Rajcok here --> stackoverflow.com/questions/34376854/… Event Emitter, Observable and Subject. The problem is... even though the objects (event emitter, observable and subject) are defined and instantiated at the beginning of the service, they become null at the place where the event is supposed to be fired. So, I get an error saying 'Cannot read property 'emit' of undefined' Because of this the subscription in the observing component is failing. What am I doing wrong? — Shilpa Nagavara
I'd need a plunker of the full class implementation to help you there, but take a look at how I do it below — Matthew Brown

Shilpa Nagavara Shilpa Nagavara · Accepted Answer · 2016-10-27T11:13:07

I figured out the issue, although I still don't have a solution. Turns out the method being called on map cannot access the class level objects. If I call emit the event on authentication, it works perfectly fine. I tried passing the event emitter object to the mapped method but that isn't helping either. How do I pass the object to mapped method scope?

The code in my service looks like this:

authenticate(authRequest: login): Observable<user> {
        let url: string = this.apiUrl + AppSettings.LOGIN_SERVICE;
        let headers = new Headers({
            'Content-Type': AppSettings.CONTENT_TYPE_HEADER
        });

        let options = new RequestOptions({ headers: headers });

        return this._http.post(url, authRequest, options) // ...using post request
            .map(this.authenticated)
            .catch(this.handleError);

        //.catch(this.handleError);
    }

    private authenticated(res: Response) {
        let body = res.json();
        if (body.StatusCode === 200) {
            localStorage.setItem('auth_token', res.headers.get("access-token"));
          //This is the event declared at the class level.
          //The following line of code is the one giving the error - cannot execute emit on  undefined
            this.authEvent.emit(true);
            return body.Data || {};
        }
        else {
            return {};
        }
    }

Angular 2: Displaying icons in navbar on authentication

3 Answers