1 Reply Latest reply on Aug 16, 2018 11:45 AM by Alex Elkman

    JS API with Angular5, Embedded iFrame content appearing in <body> not inside class vizContainer

    Alex Elkman

      I have created a Tableau component in my Angular 5 project with a method initViz():


        ngOnInit() {
        initViz() {
          var containerDiv = document.getElementsById("vizContainer"),
          url = "https://tableau.northgrum.com/#/site/NGMS/views/AgingReport/Aging?:iid=3",
          options = {
                      width: this._width,
                      height: this._height,
                      hideTabs: true
          this.viz = new tableau.Viz(containerDiv, url, options);
          console.log("Initialized viz!");


      My HTML is as follows:


      <div class="vizContainer">


      And the graph appears! However the iFrame is not getting injected in the proper spot of my HTML, it is getting added at the end of <body> and not inside the vizContainer class object for my component.

      I noticed that in the JS API code for tableau-2.2.2.js (which I am using) on line 9005 we see:




      Which seems to be the line appending to the body. Perhaps I can modify this line so it instead is going into the div content for vizContainer? I tried with no success to change it to:




      but sadly it did not work .