Wednesday, 2 June 2021

Error while binding property of a Html element 'Can't bind to.. since it isn't a known property of ..'

 

May be you are getting error message while binding an attribute of html element to a property like 'Can't bind to 'colspan' since it isn't a known property of 'td'. I got this error when I tried to bind a component property 'colspan' property to 'colspan' attribute of <td> element of  a html table, It's possible you will get similar issue for any other HTML element and attribute. 

To know the root cause of this issue, first you need to know that DOM Object and HTML elements different.

DOM allows you to access HTML element programmatically, it provides you an object which is correspond to the HTML element, so, when we are binding property in angular( in components html template) we are actually binding Angular property to the HTML DOM object's property not to the HTML elements attribute. In my case 'error message says that 'colspan' is not known property of td, i.e. colspan property is not present in DOM object created for td while we know that It's attribute of td element. 

you can easily solve this issue by appending 'attr.' in binding like

<...[attr.colspan]="angularPropertyName".../>

My Sample code:










Thank you.


No comments:

Post a Comment

Parent child component communication in Angular. (Approach-1)

  If we will make a property in Child component and somehow if it's a two-way bindable property, then Child would be able to set its val...