Tableau Angular2 Integration

Question

Has anyone tried building an Angular2 application with Tableau visualizations integrated into it using the Tableau JavaScript API?

According to the documentation, you're supposed to include the following script in your file which will create a tableau  global variable: 

<script src="https://YOUR-SERVER/javascripts/api/tableau-2.js"></script> 

I'm not sure how to access this global variable within an Angular2 class. 

Answer 1

declare var tableau: any;

viz: any;//Inside your component class

 

initViz() {

    const containerDiv = document.getElementById("vizContainer");

    const vizUrl="https://public.tableau.com/views/WorldIndicators/GDPpercapita";

 

    const options = {

      width: containerDiv.offsetWidth,

      height: 600,

      // hideTabs: true,

      // hideToolbar: true,

      onFirstInteractive: function (ev) {

        console.log(ev);

      }

    };

    if(viz != null) { // viz is undefined on both the first and second page loads - even though second page load throws a 'viz already present' error

     viz.dispose();

    }

    var viz = new tableau.Viz(containerDiv, vizUrl,options);

  }

  

  ngOnInit() {    

    this.initViz();

  }

By declaring the global variable you can access it inside a component.

Get trained to use Tableau with full potential through Tableau Online Training.