How to bind event on parent's element using Angular 2 -

i earlier adding button element inside child component's template due separation of code, had put button outside of child's template (in parent's template).

i not sure how bind click event on button trigger function on child component.

please suggest.

parent:

@component({  selector: 'app',  template: `    <button>click me call child's showme()</button>    <child></child>  ` }) 

child:

@component({  selector: 'child',  template: `hi...` })  class child {     public showme() {       console.log("showme called...");     }    } 

i don't want put event binding code in parent's template want pass button reference child component & bind event inside child component itself.

you can use template variable reference siblings

<button (click)="child.dosomething($event)">click me</button> <child #child></child>