While in the process of migrating my website to Angular, I encountered an error when attempting to compile the JS into TS for my navbar. After searching around, I found similar issues reported by other users, but their situations were not quite the same.
Below is the complete script with comments indicating where the error occurs:
document.addEventListener("DOMContentLoaded", function(event) {
const showNavbar = (toggleId, navId, bodyId, headerId) => {
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId),
bodypd = document.getElementById(bodyId),
headerpd = document.getElementById(headerId)
// Make sure all variables exist
if (toggle && nav && bodypd && headerpd) {
toggle.addEventListener('click', () => {
// show navbar
nav.classList.toggle('show')
// change icon
toggle.classList.toggle('bx-x')
// add padding to body
bodypd.classList.toggle('body-pd')
// add padding to header
headerpd.classList.toggle('body-pd')
})
}
}
showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header')
/*===== LINK ACTIVE =====*/
const linkColor = document.querySelectorAll('.nav_link')
function colorLink() {
if (linkColor) {
linkColor.forEach(l => l.classList.remove('active'))
this.classList.add('active') //error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
}
}
linkColor.forEach(l => l.addEventListener('click', colorLink))
// Your code to run since DOM is loaded and ready
});
Any assistance on resolving this issue would be greatly appreciated.
Thank you
EDIT
I later discovered that the entire section regarding 'linkcolor' was managed through my navbar script using the angular routerLinkActive feature. By removing the entire 'link active' portion from this script, I encountered no further problems. Thank you all for your help.