How to toggle class in Angular using click event

I have two component in my project. One is header.component and another is sidebar.component. In header.component, I have nav button to open sidebar. So, Basically when someone clicks on the button sidebar will be open. I declared is-open class to my CSS file to add it to the sidebar component's element. So I need to listen click event from header.component and toggle is-open class to sidebar.component

I added a simple js file to my angular project for that like this below:

window.onload = function () {
let navBtn = document.getElementById('drawerbtn')

navBtn.addEventListener('click', function () {
let navDrawer = document.getElementById('navdrawer')
navDrawer.classList.toggle('is-open')
console.dir(navDrawer)
})
}


I checked the console and it's working but in my element is-open class is not adding. How can I do that so easily?

Continue reading...