Tableau integration in Angular not working

Question

I am trying to add the Tableau in my angular app. I followed the steps but for some reason i can't see the table in my div.

my code is

declare var tableau: any;


@Component({
  selector: 'app-tableau',
  templateUrl: './tableau.component.html',
  styleUrls: ['./tableau.component.scss']
})
export class TableauComponent implements OnInit {
  viz: any;
  constructor() { }
  ngOnInit() {
  }

  initTableau() {
    const containerDiv = document.getElementById("vizContainer");
    const vizUrl =
        "https://public.tableau.com/views/VacationHome/VacationHome?:embed=y&:display_count=yes";

        const options = {  
          hideTabs: true,  
          onFirstInteractive: () => {  
              console.log("onFirstInteractive");  
          },   
          // onFirstVizSizeKnown: () => {  
          //     console.log("onFirstVizSizeKnown");   
          // }  
      };  

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

}
HTML : <div id="vizContainer" style="width:800px; height:800px; display: flex; justify-content: right; border: 2px solid black;"></div>

I donot see any errors in the terminal/console. I can see the empty div. What possibly am I missing?

Answer 1

As mentioned by R. Richards, you haven't really called initTableau anywhere in your Component. That would be required to initialize Tableau.

Also, instead of using document.getElementById, use @ViewChild

You should then call the initTableau method in ngAfterViewInit.

import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";

declare var tableau: any;

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
  viz: any;
  @ViewChild("vizContainer") containerDiv: ElementRef;

  ngAfterViewInit() {
    this.initTableau();
  }

  initTableau() {
    // const containerDiv = document.getElementById("vizContainer");
    const vizUrl =
      "https://public.tableau.com/views/VacationHome/VacationHome?:embed=y&:display_count=yes";

    const options = {
      hideTabs: true,
      onFirstInteractive: () => {
        console.log("onFirstInteractive");
      },
      onFirstVizSizeKnown: () => {
        console.log("onFirstVizSizeKnown");
      }
    };
    this.viz = new tableau.Viz(
      this.containerDiv.nativeElement,
      vizUrl,
      options
    );
  }
}

And in your Template:

<div
  #vizContainer
  style="display: flex; justify-content: center"
></div>

NOTE: Make sure that you're including the tableau script in your index.html

<script
  type="text/javascript"
  src="https://public.tableau.com/javascripts/api/tableau-2.min.js"
></script>

---

Here's a Working Sample CodeSandbox for your ref.