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.

Comments

[Adam Davis]

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