Angular 2 custom directive not binding sparkline barChart -

i trying write custom directive pass input values , bind data sparkline chart gives me error sparkline not function.

below plunker:

 import { directive, elementref, hostlistener, input , oninit } '@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

any appreciated @dfsq

you need move initialization processing 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 available during first ngonchanges right before ngoninit not within constructor.