单击角度6中的按钮时如何更改/切换div的类

Question

在这里，我有一个 div ，其类名称为old。我还需要更改/切换按钮，我需要将 div的类名称更改为new。再次单击按钮，我需要更改div到。div的类。等等。在角度6中。这是下面的代码

实际上，我刚接触角度6，谁能帮助我。

app.component.html

<button (click)="change()">change</button>
<div class="old">
  Hello
</div>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  change(){
    alert('change');
  }

  ngOnInit() {

}
}

Answer 1

您可以使用布尔变量和ngClass指令来完成此操作。

模板：

<button (click)="change()">change</button>
<div [ngClass]="{'old': toggle, 'new': !toggle}"class="old">
  Hello
</div>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  toggle:boolean = true;


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

  ngOnInit() {

  }
}

Stackblitz Demo