DEV Community

kallaguntaashok
kallaguntaashok

Posted on

How to use onclick event in angular?

let htmlcssArrow = document.querySelector(".htmlcss-arrow");
htmlcssArrow.onclick = function() {
navLinks.classList.toggle("show1");
}

I would like to add above code in typescript angular, to add toggle style to my menu, I have used this code in javascript, it was working fine.

let navLinks = document.querySelector(".nav-links");
let htmlcssArrow = document.querySelector(".htmlcss-arrow");
htmlcssArrow.addEventListener("onclick", ()=>{
navLinks.classList.toggle("show1");
})

below code used in type script and it's not working.

Top comments (1)

Collapse
 
brewinstallbuzzwords profile image
Adam Davis • Edited

Have you tried using angular's event binding?

angular.io/guide/event-binding#bin...

It looks like you're trying to add a click listener based on a css class. The angular way of doing this would be to instead create a component for your arrow and bind to a click event in the component's html file.

Edit: You also don't have to make a separate component for the arrow if you don't want to. If it's something you're only using in one spot, you could just add the click event bind to whatever html element has that class