How to add a script in angular component

Question

I'm trying to embed a Class maker test in to my angular website.

Here the script tag i got from Class maker

<script src="https://www.classmarker.com/public/js/embed-classmarker-1.0.0.js?quiz=4p365d69cbe3a608" data-quiz="4p365d69cbe3a608" data-width="700" data-height="800" ></script>

i paste it in html but it didn't work. Then i try to append this using a function by calling it in ngOnInit.

output

when i append it to document.body it loads the exam on my website

but when i try to append the script like this

this.renderer.appendChild(this.elementRef.nativeElement, script);

throws me unauthorized error. when i check the network tab, I can see below error message

Can you please help me with this ?

I tried to append the script in to my component.

Does this answer your question? How to embed a script tag into Angular component — Ricky Mo
– Ricky Mo, Commented Feb 23, 2024 at 4:44
No Sir that's not what i want. I'm about to generate more quizes for my website. i want to generate it based on the quiz number as an example. quiz=4p365d69cbe3a608. i want to embed this inside my component. I can't declare js files inside the project. — Kenath Perera
– Kenath Perera, Commented Feb 23, 2024 at 4:54
DO NOT post images of code, data, error messages, etc. - copy or type the text into the question. Please reserve the use of images for diagrams or demonstrating rendering bugs, things that are impossible to describe accurately via text. For more information please see the Meta FAQ entry Why not upload images of code/errors when asking a question? Please edit your question to include the text — Skunka
– Skunka, Commented Feb 23, 2024 at 10:12

Sharmile Murugaraj · Accepted Answer · 2024-02-23 10:49:09Z

0

You can use the below code for inserting script tag in component:

import { Renderer2, OnInit, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

class TestComponent implements OnInit {

constructor(
    private renderer2: Renderer2, 
    @Inject(DOCUMENT) private doc: Document
) { }

public ngOnInit() {

    let script = this.renderer2.createElement('script');
    script.type = `application/ld+json`;
    script.text = `
        {
            "@context": "https://test.org"
            /* your test.org microdata goes here */
        }
    `;

    this.renderer2.appendChild(this.doc.body, script);
}

}`

answered Feb 23, 2024 at 10:49

Sharmile Murugaraj

1,0941 gold badge8 silver badges10 bronze badges

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

Comments

codewithharshad · Accepted Answer · 2024-02-23 05:14:51Z

-1

 initBeaconScript() {
    // Add the Beacon script dynamically after the view has been initialized
    this.beaconScript = document.createElement('script');
    this.beaconScript.type = 'text/javascript';
    this.beaconScript.text = `
        !function (e, t, n) {
            function a() {
                var e = t.getElementsByTagName("script")[0],
                    n = t.createElement("script");
                n.type = "text/javascript", n.async = !0, n.src = "https://beacon-v2.helpscout.net", e.parentNode.insertBefore(n, e);
            }

            if (e.Beacon = n = function (t, n, a) {
                e.Beacon.readyQueue.push({ method: t, options: n, data: a });
            }, n.readyQueue = [], "complete" === t.readyState) return a();
            e.attachEvent ? e.attachEvent("onload", a) : e.addEventListener("load", a, !1);
        }(window, document, window.Beacon || function () { });
        window.Beacon('config', {
        color: '#9747FF' 
      });
        window.Beacon('init', '75d9824d-49ff-4f02-9789-2a04a2f2b0f9');
  `;
    document.head.appendChild(this.beaconScript);
  }

i was added scprit like that i think it is usefull for it

answered Feb 23, 2024 at 5:14

codewithharshad

3812 silver badges9 bronze badges

3 Comments

Kenath Perera Over a year ago

this.beaconScript.text ? what should put into this ?

codewithharshad Over a year ago

your script js code

codewithharshad Over a year ago

you are add path like this instead of text this.beaconScript.src = 'path/to/your/script.js';

Collectives™ on Stack Overflow

How to add a script in angular component

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related