Angular 2 : Eventemitter

Question

I have a template like so:

<main>
    <footer></footer>
</main>

I want to emit a value from the footer to the main component. On my parent I have a function called setStepCounter(value : number) : void . When I add the eventemitter to my footer component like so:

@Component({
    selector: 'footer',
    template: `<ng-content></ng-content> `,
    host: {
        '(stepCounterEmitter)': 'setStepCounter($event)'
    }
})

I get the following error: self.context.setStepCounter is not a function.

Answer 1

@Component({
    selector: 'footer',
    template: `<ng-content></ng-content> <button (click)="nextCounter()>click me</button> `,
})
export class Footer {
  @Output() stepCounter:EventEmitter<number> = new EventEmitter();

  private counter:number = null;
  nextCounter() {
    this.stepCounter.emit(this.counter.++);
  }
}

<main #main>
    <footer (stepCounter)="main.setStepCounter($event)"></footer>
</main>

export class MainComponent {
  setStepCounter(event:any) {
    ...
  }
}