Can't bind to 'data-link' since it isn't a known property of 'td'

Question

Actually I was doing angular migration from angularjs to angular 10. While doing the upgrade we are facing an issue with this data-link binding. keep getting the error

Can't bind to 'data-link' since it isn't a known property of 'td'

Actually they were building a grid(table structure) in the UI, It's row click will navigate to some other page, the whole row will act as a hyperlink and they were passing the clicked cell information to the next page.

Following is the angularjs code which we needs to convert to angular 10.

<tr ng-repeat="data in vm.responseData" ng-click="vm.goToSummary(data,this)">
    <td data-link="{{data.Description}}">
        <span ng-bind="data.Description" 
              data-link="{{data.Description}}">
        </span>
    </td>
    <td data-link="{{data.Description + 'propA'}}">
        <div data-link="{{data.Description + 'propA'}}" >{{data.propA}}</div>
        <span data-link="{{data.Description + 'propA_' + 'Priority'}}">{{data.propACount}}</span>
    </td>
    <td data-link="{{data.Description + 'propB'}}">
        <div data-link="{{data.Description + 'propB'}}" >{{data.propB}}</div>
        <span data-link="{{data.Description + 'propB_' + 'Priority'}}">{{data.propBCount}}</span>
    </td>
 </tr>

Can someone help me to identify how to use data-link binding in angular, or how to resolve this error. will also be helpful if someone can tell what's the role of data-link link in the above code.

I coudn't remember nothing like "data-link", so I imagine is a [data-attribute](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) of html, that can be used by jQuery or similar. In Angular you can add an attribute using `[attr.name_of_attribute]="expresion"`, if this case `[attr.data-link]="data.Description+'propA'"` — Eliseo, Aug 30 '21 at 19:18

score 0 · Answer 1 · answered Aug 19 '22 at 15:37

In my case I was migrating a code from jQuery so the original:

data-sentence="mydata"

changes to:

data-sentence="{{oracion.oracion}}"

As it works, for specific data attribute you should bracket the attribute and add attr.

But the following does't work:

[attr.data-sentence]="{{oracion.oracion}}"

So you need to convert it to:

[attr.data-sentence]="oracion.oracion"

But in consideration I think is better rethink the functional system of this in consideration the attribute could not be useful since you can keep the data in the angular controller (component)

Can't bind to 'data-link' since it isn't a known property of 'td'

1 Answers1