Search code examples
angulartooltip

angular js bind data-tooltip in loop

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.

Solution 
  • <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.