How to toggle class in Angular using click event

Question

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?

There are many ways to share data across components - stackoverflow.com/questions/39325503/… It is generally considered bad practice to use jquery in angular unless absolutely necessary — Anurag Srivastava
– Anurag Srivastava, Commented Mar 29, 2020 at 7:53
Use event observables to communicate between multiple components — haron68
– haron68, Commented Mar 29, 2020 at 7:54

David Agustin Melgar · Accepted Answer · 2020-03-29 08:49:35Z

3

The best solution for that is to create a service which it will be tasked to manage the state of the sidebar or whatever you want. In this service you need to create one variable eg: isMenuOpen this variable could be a BehaviorSubject or Subject. Then in the component, you need to subscribe to changes in that variable or directly in your HTML using the async pipe. And lastly, when you need to show the menu, you can switch between 2 CSS classes or directly changing using the property "display" between none and block. Angular is platform agnostic, using window or document you are breaking this agnosticism.

answered Mar 29, 2020 at 8:49

David Agustin Melgar

1491 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Anoop Rajasekhara Warrier · Accepted Answer · 2020-03-29 11:07:19Z

1

This will do the job for you:

In HTML:

<button [ngClass]="isOpen() ? 'is-open': ''" (click)="toggle()">Toggle</button>

In TS file:

isOpened: boolean=false;

isOpen(){
 return this.isOpened;
}

toggle(){
 this.isOpened=!this.isOpened;
}

This can be even simplified as below:

In HTML:

<button [ngClass]="isOpened ? 'is-open': '' (click)="isOpened=!isOpened">Toggle</button>

In TS:

isOpened: boolean=false;

The above code is applying to the same buttons. But what if we have to implement those in different components. Say 3 components - header, side-nave and main-content.Then we have to communicate between components using @Input and @Output to get the state. Below links might help:

https://stackblitz.com/edit/angular-sf-side-menu?file=src%2Fapp%2Fapp.component.ts

https://angular-sf-side-menu.stackblitz.io

Hope this helps.

edited Mar 29, 2020 at 11:07

answered Mar 29, 2020 at 9:17

Anoop Rajasekhara Warrier

1,0606 silver badges15 bronze badges

3 Comments

Anoop Rajasekhara Warrier Over a year ago

This just an example that modify the class in the same button. You toggle class attribute for sideNav of header click as well. Just an example to show how the syntax is.

Anwarul Islam Over a year ago

I'm using two different components. Your example just works for the same element.

Anoop Rajasekhara Warrier Over a year ago

Are you looking for something like this: angular-jsajy9.stackblitz.io ?

Павел · Accepted Answer · 2025-05-22 13:06:51Z

0

<button class="button" (click)="$event.target.closest('.parent').classList.toggle('open')"></button>

edited May 22 at 13:06

answered May 22 at 13:06

Павел

12 bronze badges

1 Comment

Jeremy Caney May 28 at 1:00

Thank you for your interest in contributing to the Stack Overflow community. This question already has existing answers. It would be useful to explain how your approach is different, under what circumstances your approach might be preferred, and/or why you think the previous answers aren’t sufficient. Can you kindly edit your answer to offer an explanation?

Collectives™ on Stack Overflow

How to toggle class in Angular using click event

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related