JavaScript file not executing in Ionic

Ionic Framework
1

I’m having trouble executing my JS-File in Ionic. It’s most likely because I’m using an Angular-Framework which is based on typescript. When executing the project the Application runs just fine, but the JS functionalities aren’t applied.

I tried implementing the JS-file in Tab2.page.html using:

<script src="example.js"></script>

An I also made sure I used the correct paths.

I’d like to know if there is a solution or some kind of workaround for my problem.
Thanks in advance!

2

U cannot use script tag in angular templates

Index.html is the only place if u insist on script tags

Files with html extension connected to a ts file are angular templates,not true html files

Angular projects are called Single Page Applications meaning there is only one true html page. Using javascript all logic is inserted and via js views are being built and removed. This js is generated by the angular compiler from the files in the src folder, typically consisting of ts-scss-html files (or only ts files, etc)

So, not an issue of typescript vs js. Its a matter of understanding how angular works.

If the js file is a specific library built by someone else, its best to look for ways to include using npm. Can u share what u want to include?

3

Thanks for answering!

I am trying to add a (responsive) gallery to my application.

It was supposed to look like this:

image
image1904×861 161 KB



But it ended up looking like this (due to the JS-functionalities not being applied):
image
image1920×765 106 KB




My JS-File:

var gallery = document.querySelector('#gallery');
var getVal = function (elem, style) { return parseInt(window.getComputedStyle(elem).getPropertyValue(style)); };
var getHeight = function (item) { return item.querySelector('.content').getBoundingClientRect().height; };
var resizeAll = function () {
    var altura = getVal(gallery, 'grid-auto-rows');
    var gap = getVal(gallery, 'grid-row-gap');
    gallery.querySelectorAll('.gallery-item').forEach(function (item) {
        var el = item;
        el.style.gridRowEnd = "span " + Math.ceil((getHeight(item) + gap) / (altura + gap));
    });
};

gallery.querySelectorAll('img').forEach(function (item) {
    item.classList.add('byebye');
    if (item.complete) {
        console.log(item.src);
    }
    else {
        item.addEventListener('load', function () {
            var altura = getVal(gallery, 'grid-auto-rows');
            var gap = getVal(gallery, 'grid-row-gap');
            var gitem = item.parentElement.parentElement;
            gitem.style.gridRowEnd = "span " + Math.ceil((getHeight(gitem) + gap) / (altura + gap));
            item.classList.remove('byebye');
        });
    }
});

window.addEventListener('resize', resizeAll);
gallery.querySelectorAll('.gallery-item').forEach(function (item) {
    item.addEventListener('click', function () {        
        item.classList.toggle('full');        
    });
});
4

Hi

So there are many things u could do differently but that would require a bit of recoding which may go beyond your appetite

A quick potential fix is to add this code to the ts file related to that template. And then place it in the ionViewDidEnter lifecycle hook. This code requires to be run after the view has been initialised

Next, you are using querySelectors and manipulate the DOM outside of angular. This potentially can create a problem. But not necessarily. Here a deeper understanding of angular is needed if you want to do this better (e.g. using ViewChild).

Next you are using var and not let. Better to avoid using var. Also you are using function, where a fat arrow would be better

Ideally you find an angular version of a lib that does the same. Google here is your best friend