I'm learning Angular 2 and trying to import nicolas kruchten's Pivottable js in an angular 2 application

When I'm trying to wrap pivottable js in the angular 2 It is not giving any error however when I try to check the same in the browser It is not displaying the Pivot table.

I can check that the component is created but is always empty.

I think `AfterViewInit` should let me display table. 

\\ pivot.component.ts

```
import {Component , Inject, ElementRef, AfterViewInit} from '@angular/core';

declare var jQuery:any;
declare var $:any;
import 'pivottable/dist/pivot.min.js';
import 'pivottable/dist/pivot.min.css';
@Component({
  selector: 'app-pivot',
  template: `<div id="pivot"></div>`
})

export class PivotWrapper {

private el: ElementRef;
//constructor spelling was incorrect now working fine
constructor (@Inject(ElementRef)el: ElementRef){
    this.el = el;
}
ngAfterViewInit(){

    if (!this.el ||
        !this.el.nativeElement ||
        !this.el.nativeElement.children){
            console.log('cant build without element');
            return;
    }

    var container = this.el.nativeElement;
    var inst = jQuery(container);
    var targetElement = inst.find('#pivot');

    if (!targetElement){
        console.log('cant find the pivot element');
        return;
    }

    //this helps if you build more than once as it will wipe the dom for that element
    while (targetElement.firstChild){
        targetElement.removeChild(targetElement.firstChild);
    }

    //here is the magic
    targetElement.pivot([
            {color: "blue", shape: "circle"},
            {color: "red", shape: "triangle"}
        ],
        {
            rows: ["color"],
            cols: ["shape"]
        });
}

```

}

\\ app.component.ts

```
import { Component,ElementRef,Inject} from '@angular/core';

declare var jQuery: any;
import {PivotWrapper} from './pivot.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

```

\\ app.module.ts

```
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import {PivotWrapper} from './pivot.component';

@NgModule({
  declarations: [
    AppComponent, PivotWrapper
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    NoopAnimationsModule,
    FormsModule,
    HttpModule,
    MaterialModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent, PivotWrapper]
})
export class AppModule { }

```