Script file on an angular component

Question

Script file on an angular component

Navigation

#1 by (1 votes)

0

Hello, I have an Angular component that needs a specific script file!

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

In my 3rd component I have an input of 'data' id, and in that jquery file has a call to that Id like this: $ ('# data'). When the bundler uploads this file, it goes up on the 1st component only and when it reaches 3rd it does not load again, making it impossible to read my ID.

I would like to know if there is a way to call this specific file only when my component is called, like this:

<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 submitted

jquery typescript angular

asked by anonymous 11.06.2018 / 06:23

1 answer

Pandas: How to make a Serial fragment in the field (Column) of the DataFrame Wordpress plugin error, ie blank field in array

score 1 · Accepted Answer

I made this generic method to add a js dynamically. See that method and asynchronous. So just use the script in the 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 like this:

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

STACKBLITZ