wrong context of AxisTickFormatting methods

I’m submitting a … (check one with “x”)

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

Current behavior

import { Component, OnInit, Input, OnChanges } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-value-history',
  template: `
    <ngx-charts-line-chart
      [xAxisTickFormatting]="xAxisTickFormatting"
    </ngx-charts-line-chart>
  `
})
export class ValueHistoryComponent {

   // ...
  constructor(private datePipe: DatePipe) { }

  xAxisTickFormatting(value) {
    return this.datePipe.transform(value, 'short');
  }
}

throws an error:

TypeError: Cannot read property 'transform' of undefined
    at XAxisTicksComponent.webpackJsonp.479.ValueHistoryComponent.xAxisTickFormatting (value-history.component.ts:60)

because the this in the formatting function seems to be the internal xAxisTickComponent

Expected behavior i expect to be able to use the injected datePipe in the AxisTickFormatting function

Reproduction of the problem see example above

What is the motivation / use case for changing the behavior? i want to use angular2 LOCALE_ID to format the date for various countries

Please tell us about your environment: OSX / Webstorm

• ngx-charts version: 4.2.0
• Angular version: 4.0.0-rc0 (ng-cli 1.0.0-rc.0)
• Browser: all
• Language: Typescript -> es5

[shmarlya]

[xAxisTickFormatting]="xFormat" // in your template guys just simple declare function like this:

 xFormat = (e) => {
   // where e - value of tick by default
   // console.log(this);
   // now you have access to your component variables
   return e + this.someVariable
 }

[tariknz]

@rutemja you need to do it in your component: public xAxisTickFormattingFn = this.xAxisTickFormatting.bind(this);

Then just use xAxisTickFormattingFn in your template