0

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.

user2963570
  • 381
  • 6
  • 21

1 Answers1

0
@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) {
    ...
  }
}
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Thank you for your response. I kinda want to avoid putting it on the element itself just in order to keep it clean. Is there a way to do it behind the screens? – user2963570 Jan 27 '17 at 17:36
  • Perhaps an approach with a service to pass the data around would fit better. – user2963570 Jan 27 '17 at 17:39
  • Actually, my answer was not entirly correct. Perhaps this is more what you want http://stackoverflow.com/questions/35574220/angular-2-capture-events-from-ng-content/35575162#35575162 – Günter Zöchbauer Jan 27 '17 at 17:39
  • 1
    A service would also be a good idea for that, especially if `
    ` and `
    ` are supposed to be used together.
     – Günter Zöchbauer Jan 27 '17 at 17:39