Search code examples
jqueryangulartypescriptbuttonclick

ToggleClass('active') on Angular and Typescript

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!

Solution

  • 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.