CODEWITHSUNDEEP
angular
Yazan Mehrez
Yazan Mehrez

Reputation: 1204

Reload js after route in Angular 4

I have an external js files that included in my Angular 4 Project, for Example if I have (date picker) with its function:

var date_select_field = $('input[name="datetimepicker"]');
        if (date_select_field.length) {
            var start = moment().subtract(29, 'days');

            date_select_field.daterangepicker({
                startDate: start,
                autoUpdateInput: false,
                singleDatePicker: true,
                showDropdowns: true,
                locale: {
                    format: 'DD/MM/YYYY'
                }
            });
            date_select_field.on('focus', function () {
                $(this).closest('.form-group').addClass('is-focused');
            });
            date_select_field.on('apply.daterangepicker', function (ev, picker) {
                $(this).val(picker.startDate.format('DD/MM/YYYY'));
                $(this).closest('.form-group').addClass('is-focused');
            });
            date_select_field.on('hide.daterangepicker', function () {
                if ('' === $(this).val()) {
                    $(this).closest('.form-group').removeClass('is-focused');
                }
            });

        }

If I route to another page localhost/register and then return to the previous page, the datepicker won't work, because the DOM cannot know what this function is and which page is linked for.

So How can I reload the js file in every single route?

Upvotes: 0

Views: 711

Answers (1)

Vikash G.
Vikash G.

Reputation: 37

You can Import js locally to ts file like this : import '../../../scripts/custom.js';

then declare method name in custom.js that you want to use like this declare var fAlert; then in a place like ngOnInit directly use this method

fAlert();

Upvotes: 1

Related Questions