solución de código : 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>

t

 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'; } }

explicación: al hacer clic en el botón, el color de la etiqueta p cambiará a verde, por defecto será rojo

En su lugar, puede enlazar con la propiedad HTML:

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

en su componente, cree la propiedad de clase para rastrear el estado del clic:

 divClicked = false

apilar

Si está utilizando clase, solución compatible:

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

con clase en tu archivo css

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