How can a custom attribute of a component be accessed? (Angular 5)

Question

I've got a component called phrase, which is used like this:

<phrase *ngFor="let phrase of phraseList.phrases" [attachedPhrase]="phrase"></phrase>

Let's say now, I get one of these phrase components using jQuery. How do I access attachedPhrase?

Here you are using ngFor. My question is if you just want to get a specific one or all ? — Ulrich Dohou, Dec 17 '17 at 13:26
There are ViewChild, ElementRef and attr() that you can use. I can help you providing a good answer but Can you provide a clear use case ? — Ulrich Dohou, Dec 17 '17 at 13:29
My application unfortunately makes use of some dirty jquery on keyboard events to return the phrase component I'm interested in. https://imgur.com/GghcsKt, Now, I need to use that DOM element to get the phrase object attached to it. — boysimple dimple, Dec 17 '17 at 13:36

Estus Flask · Answer 1 · 2017-12-17T13:43:02.540

[attachedPhrase] is not an attribute but property binding. It is supposed to be available only inside Angular application.

Although it's possible to access it as ng-reflect-* attribute, this can be recommended only for debugging purposes (this is the reason why these attributes are available in debugging mode only).

Considering that phrase is a string and attachedPhrase should be available both as component input and DOM attribute, it should be changed to attribute binding:

<phrase *ngFor="let phrase of phraseList.phrases" attachedPhrase="{{ phrase }}"></phrase>

Since attributes are case insensitive, it will be compiled to

<phrase attachedphrase="..."></phrase>

Property and attribute bindings can be interchangeable, but only if the expression is expected to be interpolated to a string.

Whenever possible, it's always preferable to not rely on DOM selectors and provide $(...) with actual reference to DOM element (nativeElement property of ViewChild or ElementRef element reference).

phrase isn't a string though. It's an object. Will this still work? — boysimple dimple, Dec 17 '17 at 13:43
No. DOM attributes cannot be objects, they are strings. You should reconsider the way you're integrating the component with jQuery. — Estus Flask, Dec 17 '17 at 13:45

score 2 · Answer 2 · edited Feb 28 '18 at 16:10

2

You can try: [attr.attachedPhrase]="'phase'".

Detailed info you can check out this site about Angular 5 directive.

edited Feb 28 '18 at 16:10

Milo

3,365
9
30
44

answered Feb 28 '18 at 15:33

user3620541

21
3

How can a custom attribute of a component be accessed? (Angular 5)

2 Answers2