How to get Angular 2 communication between child and parent component to work?

Question

Parent template

<problem-form *ngIf=showProblemView (addProblem)=problemAdd($event)></problem-form>

Child Component

import { Component, Output, EventEmitter } from '@angular/core';
@Output() addproblem = new EventEmitter<string>();
onClick() {
    this.addproblem.emit('something')
    console.log('onSubmit')
    this.active = false;
}

Parent event handler

problemAdd($event) {
    debugger;
    console.log('eventString ')
}

I know that the child event IS emitting from following the debugger. My understanding is that the parent is not capturing the emitted child event. Any Ideas? Thanks!

Answer 1

In your child:

@Output() addproblem = new EventEmitter<string>();

In the parent:

<problem-form *ngIf=showProblemView (addProblem)=problemAdd($event)></problem-form>
                                        ^

Notice the capital P.

Angular 2 is case-sensitive.

Either rename the property to addProblem or the output handler to (addproblem).