So I'm migrating my website to Angular and I'm getting this error when trying to compile the js into ts for my navbar. Looked around and found similar issues from other users but they weren't using it in the same context.
Here is the full script and ive commented where the error is:
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)
// Validate that 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 help is highly appreciated.
Thank you
EDIT
Come to find out the whole linkcolor section was controlled via my navbar script using the angular routerLinkActive. I was able to remove the whole link active section of this script and had zero problems. Thank you all for your assistance.
You might just need to add the type for this to your click function.
https://www.valentinog.com/blog/this/#typescript-and-this
function handleClick(this: HTMLElement) {
console.log("Clicked!");
this.removeEventListener("click", handleClick);
}
You should use the event argument passed to your callback. You can then use event.currentTarget to figure out which link_color element was actually clicked.
function colorLink(event: Event) {
if (linkColor) {
linkColor.forEach(l => l.classList.remove('active'))
event.currentTarget.classList.add('active') //error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
}
}
See documentation for Event.currentTarget for more info.
As an added bonus, this will work whether you use arrow functions or not...
const colorLink = (event: Event) => {
if (linkColor) {
linkColor.forEach(l => l.classList.remove('active'))
event.currentTarget.classList.add('active') //error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
}
};
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.
}
}
Write this as an arrow function. this keyword is in the function scope, not the event listener scope.
So that part should be:
const 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.
}
}