Angular2 Get data from HTML data- attribute to component

Question

I have issue with getting data from HTML data attr to component.

In Template I have:

<button [attr.data-direction]="next" type="text" (click)="nextNotes()" [disabled]="checkPage(paginator)"> > </button>

And how can I call this data attr in class method after click? There is some ng workflow for that or purejs?

console.log(data)

you want to get the data-direction attribute ? try with this <button #myBtn ..., then in your TS class you can retrieve the attribute with myBtn.getAttribute('data-direction') — Olivier Boissé
– Olivier Boissé, Commented Feb 7, 2017 at 15:28
ElementRef, you can retrieve it like this constructor(myBtn: ElementRef) { ... }, then you can try with myBtn.nativeElement.getAttribute(...) — Olivier Boissé
– Olivier Boissé, Commented Feb 7, 2017 at 15:41

unitario · Accepted Answer · 2017-02-07 17:05:46Z

3

Not sure if I am 100 % capish here, but if you just want the value from data-directive, then you could pass the button as a local variable to nextNotes() and retrieve the value from there using getAttribute

Template:

<button #btn data-direction="next" type="text" (click)="nextNotes(btn)" [disabled]="checkPage(paginator)"></button>

Class method:

nextNotes(val) {
  console.log(val.getAttribute('data-direction'))
}

answered Feb 7, 2017 at 17:05

unitario

6,5854 gold badges33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 Get data from HTML data- attribute to component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related