Ngx-charts: Feature: valueFormatting Method Passed Component Data

[mtpultz]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here

Sometimes the value passed to valueFormatting might require access to the controller data. For example, if you need to indicate a ratio, and need the denominator, but the valueFormatting method only passes the value for the numerator and nothing for the denominator. This would allow formatting for value 6 out of 20 as 6/20. You can't add /20 to units as they won't align properly.

• Angular version: 4.x.x

[marjan-georgiev]

You need to bind the function like this

[valueFormatting]="customFunction.bind(this)"

Then you will have access to the controller's properties and methods inside it.

[estechco]

This seemed to be the perfect solution to something I am attempting, but as soon as I add the "bind" any/all browsers become a CPU hog holding onto around 10%, with no other activity. This happens regardless of whether "this" or any other parameters are passed, including none.

Once removed the problem disappears.

[Hazler]

Having the same issue as @estechco is. Totally unusable at this point.

[marjan-georgiev]

have you tried doing the binding in the component and just passing the bound function in the template? Not sure if that would improve it but it might.

Component:

this.boundCustomFunction = this.customFunction.bind(this)

then in template:

[valueFormatting]="boundCustomFunction"

[Hazler]

@marjan-georgiev that actually helped, thanks!

[marjan-georgiev]

Yeah, angular evaluates method calls in the templates over and over again, and it's not a good idea to leave them there.