CODEWITHSUNDEEP
angularangular2-template
user1188867
user1188867

Reputation: 3978

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

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?

Upvotes: 0

Views: 557

Answers (2)

user1188867
user1188867

Reputation: 3978

I just used {{model.EmailAddress}} and it worked.

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

Upvotes: 0

Julia Passynkova
Julia Passynkova

Reputation: 17889

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);
}

Upvotes: 3

Related Questions