Angular 2 event binding use interpolation doesn't work inside template

Question

I have simple click event binding

@Component({template:` <div ({{eventStr}})="do-log()">DoLog</div>`})
export class AppComponent {
    eventStr:string="click";
    do-log(){
        console.log("ckp");
    }
}

of course it will work if change ({{eventStr}}) to (click) .I try many way like (${eventStr}) ,(eventStr) . I don't understand ,inside (click)="do-log()" ,this click is not string or what other type? I want to use eventStr instead of click because I want to change event type dynamic,eg swipe.

Update: I know there are two way @HostBinding and renderer.listen , but I have different use case and find some way like this: in parent component template like:

 <child-cmp eventType="swipe">Swipe</child-cmp><child-cmp eventType="click">Click</child-cmp>

and in child component template like:

<div><button (eventType)="dosomething_accordingTo_diff_touch_events()"></button></div>

of course with @Input eventType:string . It doesn't work. I guess if eventType is not a string but an event object, in fact (eventType)==("swipe") or==("click") , not equal to (swipe) or (click) . so is there one way to let (eventType)==(swipe) inside template?

Answer 1

You can't do that.

Binding expressions have to be statically analyzable, so you cannot generate them dynamically. Same goes for anchors ( discussion here ).