@Output from Child component doesn't trigger EventEmitter in Angular 5

Question

I'm trying to use @Output with the event emitter to communicate between child to parent component to pass a variable. I followed this tutorial: https://dzone.com/articles/understanding-output-and-eventemitter-in-angular

I have taken a look to different stackoverflow questions related to this, but none work for my case.

Child HTML

<button (click)="onLinkedClicked();">Click me</button>

Child TS

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
.
.
.
export class showcaseMenuComponent implements OnInit {
    @Output() public linkedClicked = new EventEmitter<String>();

    constructor() {}

    onLinkedClicked() {
        console.log('on click child');
        this.linkedClicked.emit('collapsed');
    }
}

It prints the log 'on click child'

Parent HTML

 <showcase-menu #topNavMenu [showBranding]="false"
     [showSearch]= "false" (onLinkedClicked)="linkToggler($event)"></showcase-menu>

Parent TS

.
.
.
 navMenuState: string;
.
.
.
  linkToggler($event) {
    console.log("partent");
    this.navMenuState = $event;
  }

The linkToggler() never gets called. And I don't have any error in the console,

Andriy · Accepted Answer · 2018-07-17 21:16:47Z

5

The event must match the name of the property associated with the Output decorator

<showcase-menu #topNavMenu 
               [showBranding]="false"
               [showSearch]= "false"  
               (linkedClicked)="linkToggler($event)">. 
</showcase-menu>

edited Jul 17, 2018 at 21:16

Andriy

15.6k4 gold badges49 silver badges53 bronze badges

answered Jul 17, 2018 at 21:15

jcroll

7,1939 gold badges56 silver badges68 bronze badges

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

Collectives™ on Stack Overflow

@Output from Child component doesn't trigger EventEmitter in Angular 5

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related