Back

Technologies:

javascriptjavascript
typescripttypescript
avatar
Tolerim
a month ago

My function is not being called by Angular.

My goal is to use the shouldHideColumn() function to hide certain table columns in my Angular code. However, I'm having trouble binding my tags to the <th> and <td> elements, as I keep receiving the error message “Can't bind to 'printerColumns' since it isn't a known property of 'th'.” Despite adding debugging logs to my shouldHideColumn() function, it still won't get called. To address this issue, I'm seeking guidance on how to fix the problem. Although I'm new to Angular, I'm sharing the code below, which includes the shouldHideColumn() function, as well as the URL of Stackblitz for this codebase.

To bootstrap myComponent and show my table, I'm specifically tagging <app-my-component></app-my-component>, but I'm still not seeing the table due to issues with shouldHideColumn().

Answers(2)
avatar
Vogi
a month ago
Verified Answer
I'm sorry to hear that you're having trouble binding your tags to the <th> and <td> elements. The error message you're seeing, "Can't bind to 'printerColumns' since it isn't a known property of 'th'," is likely due to a typo or a missing import statement. To fix this issue, you can try the following: - Make sure that you have imported the necessary modules in your component. - Check for typos in your code. - Verify that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". If you're still having trouble after trying these steps, please share more details about your codebase so that I can help you better. You can also check out this Stack Overflow post for more information on this issue. I hope this helps! Let me know if you have any other questions.

Sources

Property binding error after updating to Angular 13Angular 10 npm error hasBindingPropertyName is not a functionAngular can't make my function get called - Stack Overflow
avatar
Tolerim
a month ago
It seems like you are trying to bind a property called printerColumns on the th element, but Angular doesn't recognize it as a known property. To fix this issue, you can define an input property in your my-component class and pass the value to the th element using property binding. You can define an input property in my-component class like this: 
@Input() printerColumns: any[];
Then, in your HTML file, you can bind the printerColumns input to the my-table component like this: 
<my-table [columns]="printerColumns"></my-table>
After that, you can pass the printerColumns property to the th element using the *ngFor directive. 
<th *ngFor="let column of columns" [ngClass]="{'hidden-col': shouldHideColumn(column)}">
  {{ column.title }}
</th>
This way, the columns property will be passed to the my-table component, and then to the th element using property binding. Finally, the shouldHideColumn function will be called on each th element, which will return true or false depending on whether the column should be hidden or not. Also, make sure that you have imported the Input decorator from @angular/core. Hope this helps!
;