How to remove script tags in index.html from Angular Component

<script data-jsd-embedded data-base-url="" data-key="" type="text/javascript" src="js-text-sample.js"></script>

Above is my sample script tag which is on index.html

I want to hide it inside an Angular component.

The angular component will fetch a config first from the API. Then it will validate if it needs to hide the script or not.

The script is a embedded widget that I need to hide if its false on the config API.

How do I hide it from the component code?

Instead of placing script tag and worrying about after logic to hide/show, why don't you create script tag at runtime based on result.

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

class MyComponent implements OnInit {

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

    public ngOnInit() {

        let script = this._renderer2.createElement('script');
        script.src='_SOURCE_HERE_'
        `;

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