angular js bind data-tooltip in loop

Question

I am very new to Angular. Here is my angular code :

<tr *ngFor="let data of mf.data">
    <td>
         <div class="aeName">
            <span class="displayName" materialize="tooltip" data-position="top"  data-tooltip="{need to add data.aeName}">{{data.aeName != "" ? data.aeName : data.email}}</span>
         </div>
    </td>
</tr>

If I write directly {{data.aeName}} in data-tooltip attribute the page stops working leaving no any error. Is there any other way to fill data-tooltip with current value in the loop?

Any help is appreciated.

Thanks.

if this is angularjs related, please dont use the tag angular — Jota.Toledo
– Jota.Toledo, Commented Jun 13, 2017 at 8:09

SandyK · Accepted Answer · 2017-06-13 09:07:19Z

2

<tr *ngFor="let data of mf.data">
<td>
     <div class="aeName">
        <span class="displayName" materialize="tooltip" data-position="top"  [attr.data-tooltip]="data.aeName != '' ? data.aeName : data.email">{{data.aeName != "" ? data.aeName : data.email}}</span>
     </div>
</td>

this works for me. May be this will help someone.

answered Jun 13, 2017 at 9:07

SandyK

4651 gold badge9 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

angular js bind data-tooltip in loop

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