Toggle class on <body> with button click

Question

I have a button, when clicked I would like the body to get the class "open-menu". With jQuery it was very easy, all I had to do what was add this line of code

 $('.burger').click(function() { $('body').toggleClass('menu-open'); }); };

But I don't understand how I can achieve that in Angular with typescript! All the info I can find online pertains to toggling a class on the same element!

Answer 1

Just add a boolean property to your Component Class:

menuOpened: boolean = false;

Once the button is clicked, you need to do two things:

Toggle the menuOpened :

 <button (click)="menuOpened = !menuOpened">Click to Toggle Menu</button>

Add the class conditionally:

 <div [class.menu-open]="menuOpened"></div>

Here's a Working Sample StackBlitz for your ref.

Answer 2

goes without angular simply: document.body.classList.add('menu-open'); to remove: document.body.classList.remove('menu-open')

Toggle class on <body> with button click

Question

2 answers

solution1
1 2019-07-21 11:27:19

solution2
0 2019-07-21 11:32:42

Toggle class on <body> with button click

Question

2 answers

solution1 1 2019-07-21 11:27:19

solution2 0 2019-07-21 11:32:42

solution1
1 2019-07-21 11:27:19

solution2
0 2019-07-21 11:32:42