How to pass component value to Custom Directive Host Listener in angular2

Question

I want to pass model value from my HTML template to my custom directive:

    @Directive({
    selector: '[eventlistener]'
})
export class EventListener {
  @Input() value:string = 'Not Defined';
    @HostListener('click')
    onClick() {
        console.log('You clicked me',value);
    }
}

and in my HTML template :

<button eventlistener (click)="captureClickEvent()" value="model.EmailAddress">test</button>

Currently, it's displaying model.EmailAddress, I want to get the evaluated value(which I get in the component). Is there any way to get it?

Answer 1

You need to use [] binding for value

<button eventlistener (click)="captureClickEvent()" [value]="model.EmailAddress">test</button>

and in onClick method use this.value instead of just value

@HostListener('click')
onClick() {
    console.log('You clicked me', this.value);
}

Answer 2

我刚刚使用了{{model.EmailAddress}}，就可以了。

<button eventlistener (click)="captureClickEvent()" value="{{model.EmailAddress}}">test</button>