How to add data-autoload, data-origin and data-callback script tags in Angular typescript

Question

I want to add my script in angular application which contains 'data-autoload, data-origin and data-callback' keys. I tried with _renderer2.createElement('script') method but it is throwing error.

Code

 let script = this._renderer2.createElement('script');
 script.type="application/javascript";
 script.data-autoload" =""
 script.data-origin" =""
 script.data-callback" =""

this._renderer2.appendChild(this.document.body,script)

Error

error ';' expected at

and same error for data-origin and data-callback

Kindly help me to resolve this issue

Naren Murali · Accepted Answer · 2024-07-04 01:30:51Z

1

You have an invalid javascript variable.

Rules for variable name:

Spaces are not allowed in variable names.
Hyphens are not allowed in variable names.
Only letters, numbers, underscores, and dollar signs are permitted in variable names.
Case matters when it comes to variable names.
Variable name always starts with a letter (alphabet), underscore (_), or a dollar sign ($), i.e. any other special characters not allowed.
Reserved keywords are not allowed.

Reference link

The code fix for this is to use setAttribute instead.

  constructor(private _renderer2: Renderer2) {}
  
  ngOnInit() {
    let script = this._renderer2.createElement('script');
    script.setAttribute('type', 'application/javascript');
    script.setAttribute('data-autoload', '');
    script.setAttribute('data-origin', '');
    script.setAttribute('data-callback', '');
    this._renderer2.appendChild(document.body,script)
  }

Stackblitz Demo

edited Jul 4, 2024 at 1:30

answered Jul 4, 2024 at 1:25

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

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

Collectives™ on Stack Overflow

How to add data-autoload, data-origin and data-callback script tags in Angular typescript

1 Answer 1

Stackblitz Demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related