Angular 添加和删除 类 由没有 jquery 的方法触发

Question

我有一些代码想与 animate.css 一起使用，以在 div.

中添加和删除 class

代码如下：

app.component.html

<button (click)="toggleMethod()">Toggle Classes</button>

<div class="myDiv">
    // Stuff here
</div>

app.component.ts

toggle = false;


toggleMethod() {
    
    if (this.toggle === true) {
        //Do this without JQ $('.myDiv').removeClass('animate__animated animate__fadeInLeft');
    } else if (this.toggle === false) {
      //Do this without JQ $('.myDiv').addClass('animate__animated animate__fadeInLeft');
    }
    this.toggle = !this.toggle; 
  
}

如何在不使用 jQuery（Angular 方式）的情况下执行上述操作？

Answer 1

对于 Angular 而不是 angularjs，尝试：

app.component.html

<button (click)="toggleMethod()">Toggle Classes</button>  
<div class="myDiv" [class]="{'animate__animated': toggle, 'animate__fadeInLeft': toggle}">
    // Stuff here
</div>

app.component.ts

toggle: boolean = false;

toggleMethod() {
    this.toggle = !this.toggle;      
}