ToggleClass('active') on Angular and Typescript

Question

Anyone knows how can I do something like this with Angular?

$('button').click(function(){
  $('button').toggleClass('active');
  $('.title').toggleClass('active');
  $('nav').toggleClass('active');
});

Thank you very much!

Use ngClass angular.io/api/common/NgClass

user184994
– user184994

2018-11-20 20:09:25 +00:00
Commented Nov 20, 2018 at 20:09 — user184994
– user184994, Commented Nov 20, 2018 at 20:09

SiddAjmera · Accepted Answer · 2018-11-20 20:10:59Z

7

You can use something like this([class.className]="conditionThatResolvesToABoolean", or [ngClass]) for doing this:

<div [class.active]="classApplied">
  Here's some text
  <button (click)="toggleClass()">Toggle Class</button>
</div>

And in your Template:

import { Component } from '@angular/core';

@Component({...})
export class AppComponent  {
  classApplied = false;

  toggleClass() {
    this.classApplied = !this.classApplied;
  }
}

Here's a Sample StackBlitz for your ref.

answered Nov 20, 2018 at 20:10

SiddAjmera

39.6k7 gold badges78 silver badges114 bronze badges

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

2 Comments

Qasim Over a year ago

How about if I have to toggle the class on multiple elements. classApplied toggles them on every instance simultaneously...

SiddAjmera Over a year ago

If your instances are a part of a list, each object in that list backing up an instance could additionally have a property that determines whether the class should be applied or not. And you could use the index of the item in the list to only set this property for the item present at that index. Hope that makes sense. If not, I'd urge you to create a new question thread and I'd be happy to answer in there. :)

Md. Shahidul Islam · Accepted Answer · 2022-03-13 07:20:18Z

2

In my case i have added Toggle class like that:

Component-HTML

<button (click)="darkMode()">Dark Mode</button>

Component-TS

 darkMode() {
    const themeClass = document.querySelector('body');
    themeClass?.classList.toggle('dark-mode');
 }

And its work for me.

answered Mar 13, 2022 at 7:20

Md. Shahidul Islam

3303 silver badges12 bronze badges

Comments

Himanshu Jangid · Accepted Answer · 2021-04-28 06:14:30Z

1

This is the Typescript code to solve this problem

@Component({
      selector: 'app-navbar',
      templateUrl: './navbar.component.html',
      styleUrls: ['./navbar.component.scss']
    })
    export class NavbarComponent implements OnInit {
    
      is_active = "";
      constructor() { }
    
      ngOnInit(): void {
      }
    
      toggleNav(){
        if(this.is_active){
          this.is_active = "";
        }
        else{
          this.is_active = "is-active";
        }
      }
    
    }

This is my way to do it now we can use is_active property in the html code

<div class="navbar-burger {{is_active}}" role="button" (click)="toggleNav()" data-target="navbarExampleTransparentExample">

answered Apr 28, 2021 at 6:14

Himanshu Jangid

3854 silver badges15 bronze badges

1 Comment

Никита Середа Over a year ago

fo something like this u can use public isActive = false; remove toggleNav func, and in html: [class.is-active]="isActive" (click)="isActive = !isActive"

Collectives™ on Stack Overflow

ToggleClass('active') on Angular and Typescript

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related