Pass in element to function in Angular

Question

I would like to conditionally apply a title attribute to an element, which I am attempting like so:

<div class="option-title" [attr.title]="isTitleTruncated() ? option.title : null">
  {{option.title}}
</div>

But I would like to pass in the element reference to my function being used on the condition, but have been unable to do so. I tried using this and that gives me the component instance, but I want the actual div itself. Is this possible?

yurzui · Accepted Answer · 2018-10-31 11:56:25Z

8

Try using template reference variable like:

<div ... #divRef [attr.title]="isTitleTruncated(divRef) ? option.title : null">

answered Oct 31, 2018 at 11:56

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

1 Comment

mindparse Over a year ago

Thanks this worked, although I have hit a change detection error now, which I will post a separate question on

Teddy Sterne · Accepted Answer · 2018-10-31 11:57:05Z

1

You should create a template reference variable on the elmenent that looks like #myDiv and then pass it to the function.

<div class="option-title" #myDiv [attr.title]="isTitleTruncated(myDiv) ? option.title : null">
  {{option.title}}
</div>

answered Oct 31, 2018 at 11:57

Teddy Sterne

14.3k2 gold badges49 silver badges52 bronze badges

1 Comment

Alexander Over a year ago

what is myDiv type? it just outputs markup in console.log, if i put any type to check it out, so it's not clear what type of data is that. I need to swap CSS class for clicked element.

Collectives™ on Stack Overflow

Pass in element to function in Angular

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related