ToggleClass ('активный') на Angular и Typescript

Question

Кто-нибудь знает, как я могу сделать что-то подобное с Angular?

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

Большое спасибо!

Answer 1

Вы можете использовать что-то вроде этого ([class.className]="conditionThatResolvesToABoolean" или [ngClass]) для этого:

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

И в вашем шаблоне:

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

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

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

Вот Образец StackBlitz для вашей ссылки.