Angular 2 custom directive not binding sparkline barChart

Question

I am trying to write custom directive to pass input values and then bind data to the sparkline chart but it gives me error:

sparkline is not a function.

Below is the plunker:

 import { Directive, ElementRef, HostListener, Input , OnInit } from '@angular/core';

@Directive({
  selector: '[myBarChart]'
})
export class BarChartDirective {
  private el: HTMLElement;

  @Input('myBarChart') barChartValues: number[] = [];

  constructor(el: ElementRef) { this.el = el.nativeElement; }

  ngOnInit() {
  this.el.sparkline(this.barChartValues, {
    type: 'bar', barColor: 'green', width: 300, height: '50',
    barWidth: 8, barSpacing: 3, colorMap: ["green", "yellow", "red"], 
    chartRangeMin: 0
  });
 }
}

http://plnkr.co/edit/BpY6Kd1bSMzWTKSZqJzv

Answer 1

You need to move your initialization processing into the ngOnInit lifecycle hook method:

constructor(private el: ElementRef) { 
}

ngOnInit() {
  el.sparkline(this.barChartValues, {
    type: 'bar', barColor: 'green', width: 300, height: '50',
    barWidth: 8, barSpacing: 3, colorMap: ["green", "yellow", "red"], 
    chartRangeMin: 0
  });
}

Values of inputs are only available during the first ngOnChanges right before the ngOnInit but not within the constructor.