0

I've tried to add JS grid code to component html file in Angular using tags script, but it doesn't work. So, here is a code:

var lastClicked;
var grid = clickableGrid(10,10,function(el,row,col,i){
    console.log("You clicked on element:",el);
    console.log("You clicked on row:",row);
    console.log("You clicked on col:",col);
    console.log("You clicked on item #:",i);

    el.className='clicked';
    if (lastClicked) lastClicked.className='';
    lastClicked = el;
});

document.body.appendChild(grid);

function clickableGrid( rows, cols, callback ){
    var i=0;
    var grid = document.createElement('table');
    grid.className = 'grid';
    for (var r=0;r<rows;++r){
        var tr = grid.appendChild(document.createElement('tr'));
        for (var c=0;c<cols;++c){
            var cell = tr.appendChild(document.createElement('td'));
            cell.innerHTML = ++i;
            cell.addEventListener('click',(function(el,r,c,i){
                return function(){
                    callback(el,r,c,i);
                }
            })(cell,r,c,i),false);
        }
    }
    return grid;
}

Should I convert it to typescript (I don't know how), or is there another way to solve it?

Doniyor Najmiddinov
  • 1
  • is there any reason that you want to do this in a vanillajs script instead of an angular component? – Jota.Toledo Mar 03 '18 at 13:29
  • is the problem with loading this js or the code of this js? If you are facing load js problem, check this [question](https://stackoverflow.com/questions/34489916/how-to-load-external-scripts-dynamically-in-angular) – Yazan Mehrez Mar 03 '18 at 13:34

0 Answers0