Angular @Output & EventEmitter not working

Question

I am trying to pass the value of show from my navbar component to my app root component which i am using to form the basic layout of the app. In the navbar-component.ts I have this:

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

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html'
})
export class NavbarComponent {

    public show = true;
    @Output() showEvent = new EventEmitter<boolean>();

    constructor() { }

    sendToggle() {
        if (this.show === true) {
            this.show = false;
        } else {
            this.show = true;
        }
        this.showEvent.emit(this.show);
    }

}

and then in the template I have this:

<button type="button" class="btn btn-transparent ml-2 mr-auto"
    (click)="sendToggle()">
    <span class="fa fa-bars"></span>{{ show }}
</button>

I added {{ show }} just so that I can see the state of show change per the sendToggle() method.

Then I set up the app-component.ts like this to listen for the event:

import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})

export class AppComponent {

    public show: boolean;

    getToggle($event) {
        this.show = $event;
    }

}

and then on the template I have this:

<app-navbar></app-navbar>
<div id="wrapper">
    <nav (showEvent)="getToggle($event)" id="sidebar" [ngClass]="{show: show}">
        {{ show }}
        <app-sidebar></app-sidebar>
    </nav>
    <div id="content">
        <app-breadcrumb></app-breadcrumb>
        <router-outlet></router-outlet>
    </div>
</div>

so when I click the button I can see the state of show change within the navbar component, however the app component does not seem to be getting the message. What the heck am I doing wrong here?

Poul Kruijt · Accepted Answer · 2019-07-06 13:06:04Z

22

You should put the showEvent on the actual component selector app-navbar that has the @Output decorator and not on the nav element:

<app-navbar (showEvent)="getToggle($event)"></app-navbar>

edited Jul 6, 2019 at 13:06

answered Jan 6, 2018 at 21:56

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rahul Sonwanshi Over a year ago

I have a similar issue and I'm putting it in the correct place unable to solve this

David · Accepted Answer · 2018-01-06 21:56:29Z

4

You've got your handler on the wrong element (nav instead of app-navbar)

<app-navbar (showEvent)="getToggle($event)"></app-navbar>

answered Jan 6, 2018 at 21:56

David

34.6k13 gold badges90 silver badges124 bronze badges

Collectives™ on Stack Overflow

Angular @Output & EventEmitter not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related