Script file on an angular Component

Question

Hello, I have an Angular System that requires a specific script!

This Component is not started on the first screen of my application, so I cannot put my script file in the Bundler, because by the Bundler this file is loaded only once it is the startup of the first compoenent that will be loaded. For example:

In my 3rd place I have an id input 'data', and in this jquery file I have an id called like this: $('#data'). When the bundler goes up this file, it goes up in the 1st Component only and when it arrives in the 3rd it does not load again, making it impossible to read my Id.

I wonder if there is a way to call this specific file only when my Component is called, so for example:

<script src="../../../../scripts/teste.js"></script>

<div class="container">
    <p class="interest-preference">Escolha uma data e horário.</p>
    
    <!--adjust Form Position-->
    <div class="clear"></div>
    
    <div class="wrap-input">
        <input class="date-picker input.validator" id="datepicker" name="datepicker" type="text" placeholder="Data">
        <label class="label-input" for="data">
            <span class="far fa-calendar-alt"></span>
        </label>
    </div>
    
    <div class="wrap-input">
        <input class="timepicker" type="text" name="horario" id="horario" placeholder="Horário">
        <label class="label-input" for="horario">
            <span class="far fa-clock"></span>
        </label>
    </div>
    
    <div class="wrap-input">
        <div class="wrap-btn">
            <button class="btn">
                CONFIRMAR
            </button>
        </div>
    </div>
</div>

Error presented

Answer 1

I made this generic method to add a js dynamically. See that method and asynchronous. So just use the script in callback.

constructor(private renderer: Renderer2) {
}

addJsToElement(src: string): HTMLScriptElement {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;
    this.renderer.appendChild(document.body, script);
    return script;
  }

call the method so:

this.addJsToElement('https://widgets.skyscanner.net/widget-server/js/loader.js').onload = () => {
        console.log('SkyScanner Tag loaded');
}

STACKBLITZ