Angular Scripts

Question

Hello, I have an angular application where I am using jquery scripts to implement a datapiker and a timepiker, these presented below:

I have a separate script for their startup, presented below:

 jQuery(document).ready(function () {
            $('#datepicker, .datepicker').datepicker({ dateFormat: 'dd.mm.y' });
            $('.select').styler();
            $('input.timepicker').timepicker({ timeFormat: 'HH:00' });

            $('.radio-list__input-wrap').mousedown(function () {
                changeCheck($(this));
            });
            $('.radio-list__input-wrap').each(function () {
                changeCheckStart($(this));
            });


            function changeCheck(el) {
                var el = el, input = el.find('input').eq(0);
                if (!input.attr('checked')) {
                    $('.radio-list__input-wrap').each(function () {
                        cInput = $(this).find('input').eq(0);

                        if (cInput.attr('name') == input.attr('name')) {
                            $(this).removeClass('radio-list__item_active');
                            cInput.attr("checked", false);
                        }
                    });
                    el.addClass('radio-list__item_active');
                    input.attr("checked", true);
                }
                return true;
            }
            function changeCheckStart(el) {
                var el = el, input = el.find('input').eq(0);
                if (input.attr('checked')) {
                    el.addClass('active');
                }
                return true;
            }
        });

However this screen is not my home screen, with this the datapiker and the timepiker is only presented if der F5 on this screen presents, so the script would load them.

I would like to know how to load this script as soon as this page is presented?

Thank you in advance

Answer 1

According to the angular-cli documentation you can install by npm normally and add the angular-cli.json scripts tag.

npm install jquery — save

angular-cli.json

“scripts”: [ “../node_modules/jquery/dist/jquery.min.js” ]

In its component

import * as $ from ‘jquery’;

References: https://github.com/angular/angular-cli/wiki/stories-global-scripts

To add the jquery type for autocomplete: https://github.com/angular/angular-cli/wiki/stories-third-party-lib

EDIT

To add a javascript dynamically in an angular Component I made this function that takes as parameter the string of the script (usually a Cdn). For example:

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js

import { Renderer2 } from '@angular/core'; 

constructor(private renderer: Renderer2) {}

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

And you can call her that:

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