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

zmag · Accepted Answer · 2019-02-19 08:39:57Z

1

Try this:

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

answered Feb 19, 2019 at 8:39

zmag

8,27112 gold badges39 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zmag Over a year ago

@LucianBumb set property on s.dataset, not s.data

Lucian Bumb Over a year ago

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 · Accepted Answer · 2019-02-19 09:26:04Z

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.

Collectives™ on Stack Overflow

How to embed a script tag in an angular component?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related