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 - https://stackoverflow.com/questions/39325503/how-to-pass-data-between-two-components-in-angular-2 It is generally considered bad practice to use jquery in angular unless absolutely necessary — Anurag Srivastava, Mar 29 '20 at 07:53
Use event observables to communicate between multiple components — haron68, Mar 29 '20 at 07:54
Does this answer your question? [How to pass data between two components in Angular 2](https://stackoverflow.com/questions/39325503/how-to-pass-data-between-two-components-in-angular-2) — haron68, Mar 29 '20 at 17:15

score 3 · Accepted Answer · answered Mar 29 '20 at 08:49

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.

Anoop Rajasekhara Warrier · Answer 2 · 2020-03-29T11:07:19.890

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 '20 at 11:07

answered Mar 29 '20 at 09:17

Anoop Rajasekhara Warrier

1,010
3
15

1

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. – Anoop Rajasekhara Warrier Mar 29 '20 at 09:31
I'm using two different components. Your example just works for the same element. – Anwarul Islam Mar 29 '20 at 10:18
Are you looking for something like this: https://angular-jsajy9.stackblitz.io ? – Anoop Rajasekhara Warrier Mar 29 '20 at 11:02

How to toggle class in Angular using click event

2 Answers2