CODEWITHSUNDEEP
angularangular7
Lucian Bumb
Lucian Bumb

Reputation: 2881

How to embed a script tag in an angular component?

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

Upvotes: 0

Views: 258

Answers (2)

Lucian Bumb
Lucian Bumb

Reputation: 2881

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.

Upvotes: 0

zmag
zmag

Reputation: 8241

Try this:

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

Upvotes: 1

Related Questions