Angular2, child output not bubbling up to parent

Question

I have two components, one a child of the other. I have a click function that causes an event emitter on that component to emit a string. In the parent template, on the child tag, I have the event emitter triggering a function on the parent component that simply console logs a simple message. I can see by logging the event emitter variable to the console that the click function in the child is working, but I can't understand why its not outputting correctly up to the parent.

Child Component

import {Component, OnInit, EventEmitter} from 'angular2/core';

@Component({
    selector: 'team-bubbles',
    templateUrl: '/static/partials/team/team-bubbles.html',
    outputs: ['sendTeamDataUp'],
})

export class TeamBubblesComponent {
    sendTeamDataUp:EventEmitter<string>;

    constructor() {
        this.sendTeamDataUp = new EventEmitter();
    };

    invokeTeamDataEmitter() {
        console.log('Made it this far');
        this.sendTeamDataUp.emit('WAKA WAKA WAKA');
    }

    OnInit() {
        console.log('TEAM BUBBLE WORKS');
    }
}

team-bubbles.html

<div class="bubble-wrapper sm" id="bubble-1" (click)="invokeTeamDataEmitter()">
        <div class="team-bubble sm">
            <img src="/static/images/team/guy1.jpg" alt="guy 1">
        </div>
    </div>

Parent Component

import {Component} from 'angular2/core';
import {TeamBubblesComponent} from "./teambubbles.component";
import {TeamInfoComponent} from "./team-info.component";

@Component({
    selector: 'team',
    templateUrl: '/static/partials/team/team.html'
})

export class TeamComponent {

    receiveData(){
        console.log('Output Works');
    }
}

team.html

<div class="full-wrapper team-bubbles-container">
    <div class="container">
        <div class="row">
            <team-bubbles (sendTeamDataUp)="receiveData($event)"></team-bubbles>
        </div>
    </div>
</div>
<div class="full-wrapper member-bio-container">
    <div class="container" style="padding: 5px;">
        <div class="row">
            <team-info></team-info>
        </div>
    </div>
</div>

Seems you're using old version of angular2. You should add your child component to directives array of your parent component plnkr.co/edit/1vYZFhnPyePiWwWBYgPs?p=preview — yurzui
let me try it out. Should I upgrade my version of Angular2 ? — TJB
Yep, that fixed it ! I thought by simply importing the components in the parent, that it would work since the application was finding the child component's selectors and rendering their templates. Thanks Yurzui ! — TJB

micronyks micronyks · Accepted Answer · 2016-10-23T15:48:41

    sendTeamDataUp:EventEmitter<string>;

    constructor() {
        this.sendTeamDataUp = new EventEmitter<string>();           //<<<### added <string>
    };

    invokeTeamDataEmitter() {
        console.log('Made it this far');
        this.sendTeamDataUp.emit('WAKA WAKA WAKA');
    }

OR

    sendTeamDataUp:EventEmitter<string>=new EventEmitter<string>(); //<<<### declare here

    invokeTeamDataEmitter() {
        console.log('Made it this far');
        this.sendTeamDataUp.emit('WAKA WAKA WAKA');
    }

Angular2, child output not bubbling up to parent

1 Answers