How to call component method in ng-content in Angular 2?

Question

Angular

The title is not entirely clear, here is a specific example:
HomeComponent template:

<app-step-controls>
  <button>Назад</button>
  <button (click)="toNextStep('test')">Вперед</button>
</app-step-controls>

AppStepControlsComponent template:

<div>
  <ng-content></ng-content>
</div>

The toNextStep() method is defined in the AppStepControls component, but it is not called when a button is clicked inside the AppStepControlsComponent tags. How can I call this method when the button is clicked?

Answer 1

Add exportAs to the component:

@Component({
  selector: 'app-step-controls',
  template:
  `
  <div>
    <ng-content></ng-content>
  </div>
  `,
  exportAs: 'appStepControls'
})
export class AppStepControlsComponent {
}

Use something like this:

<app-step-controls #ascs="appStepControls">
  <button>Назад</button>
  <button (click)="ascs.toNextStep('test')">Вперед</button>
</app-step-controls>

Answer 2

Use @ViewChild to get child learnangular2.com/viewChild