在Angular中使用ngClass或ngStyle动态更改颜色

你可以直接绑定到HTML属性:

<div (click)="divClicked = !divClicked">
<p [class.text-color]="divClicked">
some text...
</p>
</div>

divClicked = false

cosoluution: https://stackblitz.com/edit/ngstyle-examples-m7sifc?file=src/app/app.component.html

html

<p [ngStyle]="{ color: colorFlag }">top</p>
<button (click)="change()">click</button>

ts

import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
colorFlag = 'red';
change(){
this.colorFlag= 'green';
}
}

explination:点击按钮后，p标签的颜色变为绿色，默认为红色

如果您正在使用类，兼容的解决方案:

<div
<p [ngClass]="{'text-red': true, 'text-white': false}"> 
some text...
</p>
</div>

.text-red: { 
color:red;
}
.text-white: { 
color:white;
}