CODEWITHSUNDEEP
typescriptangular
Mark Sandman
Mark Sandman

Reputation: 3333

Simple EventEmitter not being detected by Parent Component - Angular2

I am writing my first Angular2 application with a little help from the angular cli. I am trying to write a show/hide toggle feature for a hamburger menu that is available for smaller screens. My app layout looks like so:

|-- app
    |-- src
        |-- navigation
            |-- navigation.component.ts
            |-- navigation.service.ts
            |-- navigation.template.html
        |-- main.ts
        |-- main.template.html
        |-- system-config.ts
    |-- index.html

Now I just want a simple feature that when I click a button in my navigation.template.html, like so:

<button type="button" class="navbar-toggle collapsed" (click)="toggleMenu()">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

the click event invokes a method in my navigation.component.ts like so

togMenu: boolean = false;
//... more code then,

toggleMenu(): void {
    this.togMenu = !this.togMenu;
    this.navigationService.toggleMenuEvent.emit(this.togMenu);
}

that uses a service in the same folder with the following code:

import {Injectable, EventEmitter} from '@angular/core';

@Injectable()
export class NavigationService {
    toggleMenuEvent: EventEmitter<boolean> = new EventEmitter();
}

Nothing that great but I need the Emmitted value in the main.template.html so I listen for the Event Emitter in the main.ts file within the class constructor:

showMenu: boolean = false;

    constructor(private navigationService: NavigationService) {
        navigationService.toggleMenuEvent.subscribe(
            (val) => {
                this.showMenu = val;
            });
    }

However the event isn't picked up in the parent Component. It isn't heard / recognized, thus the showMenu variable is always false. Should I put the name code into the child component the event is heard but it doesn't seem to bubble up to the parent (main) component. What I am doing wrong. Please note that I have no errors in my console and I am using the release candidate of Angular2.

I have been looking on this site and other places and the use of Observables are suggested rather than the Event Emitter, I know nothing about Observables hence me doing it this way.

Please note: I have reduced the code in my example so the question is not too long.

Upvotes: 1

Views: 998

Answers (1)

Thierry Templier
Thierry Templier

Reputation: 202138

I guess that it's a problem regarding the scope of the instance of your service. I mean to have a shared service you need to define it when bootstrapping your application for example:

bootstrap(AppComponent, [ NavigationService ]);

and not define it again for components in their providers attributes. This way you will share the same instance and will be able to share event emitters.

Just a quick note, you should use Observable or Subject instead of EventEmitter in shared services. EventEmitters are only to implement custom events in components.

Upvotes: 1

Related Questions