How to embed a script tag in an angular component?

Question

I have this script tag:

<script src='//vizor.io/static/scripts/vizor-360-embed.js' 
        data-vizorurl='//vizor.io/embed/bumblucian/casuta-favorita'></script>

which will put on my website a 3D image (see example 3D images)

I want to create a component which I can use in several places on my website. If I put the script tag as it is, on the html file, is not working.

I tried the answer from this question Adding script tags in Angular component template but I do not know how to add the data-vizorurl attribut to the script tag.

export class PerspectiveImageComponent implements OnInit {

  constructor(private _renderer2: Renderer2, @Inject(DOCUMENT) private _document) {
  }

  public ngOnInit() {

      let s = this._renderer2.createElement('script');
      s.src='//vizor.io/static/scripts/vizor-360-embed.js';

      // I tried like this, but is not compiling. 
      s.data-vizorurl='//vizor.io/embed/bumblucian/casuta-favorita'; 

      this._renderer2.appendChild(this._document.body, s);
  }
}

Can you help me with a solution?

Edit: if I use s.dataset.vizorurl is working. I have the script tag on the document, but I have another error:

vizor-360-embed.js:28 Uncaught TypeError: Cannot read property 'previousElementSibling' of null
    at findSelfInDocument (vizor-360-embed.js:28)
    at vizor-360-embed.js:34
    at vizor-360-embed.js:98

score 1 · Answer 1 · answered Feb 19 '19 at 08:39

1

Try this:

...
s.dataset.vizorurl='//vizor.io/embed/bumblucian/casuta-favorita';
...

answered Feb 19 '19 at 08:39

zmag

7,825
12
32
42

@LucianBumb set property on `s.dataset`, not `s.data` – zmag Feb 19 '19 at 08:47
yes, with dataset is putting this script tag. I got another error `Cannot read property 'previousElementSibling' of null at findSelfInDocument (vizor-360-embed.js:28)` I think is not working properly due to angular – Lucian Bumb Feb 19 '19 at 08:50

score 0 · Answer 2 · answered Feb 19 '19 at 09:26

For the moment I use a trick to show this 3D images, I put the script tag in a div on the Index.html, and I toggle the div visibility using this function:

toggleElement(){
  var el=  document.getElementById("3dImage");

    if (el.style.display === "none") {
      el.style.display = "block";
    } else {
      el.style.display = "none";
    }
  }

I still receive some wornings:

Running application "PlayerRenderer" with appParams: {"initialProps":{"file":{"scenes":[{"type":"scene","uid":"HnWHDuk8CCCX","children":[],"props":{"title":"IMG 0094 IMG 0175 27 imag","originalTitle":"IMG 0094 IMG 0175 27 imag","background":"/data/image/09a7c800ceea1d084aa480b0ab34902011ad7e20.jpg","thumbnail":"/data/image/09a7c800ceea1d084aa480b0ab34902011ad7e20-thumbnail.jpg"}}]}},"rootTag":1}. DEV === false, development-level warning are OFF, performance optimizations are ON

If anyone will found a solution to embed vizor.io script tag in an angular component, I am still interested.

How to embed a script tag in an angular component?

2 Answers2