Angular Scripts

Question

Angular Scripts

Navigation

#1 by (2 votes)

0

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

Ihaveaseparatescriptforinitializingthem,whichisshownbelow:

 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;
            }
        });

But this screen is not my home screen, so the datapiker and the timepiker are only displayed if F5 appears on this screen, so the script would load them.

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

Thank you in advance

javascript jquery angular

asked by anonymous 05.06.2018 / 07:35

1 answer

Python Method Resolution Order (MRO) How to check numbers contained in a query in a field

score 2 · Accepted Answer

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

npm install jquery — save

angular-cli.json

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

In your component

import * as $ from ‘jquery’;

References: link

To add the jquery type to autocomplete: link

EDIT

To add a javascript dynamically on an angular component I have made this function that takes as a parameter the script string (usually a cdn). For example:

link

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 it like this:

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