Vinculação em Massa de Classes CSS no Angular

Com a diretiva ngClass, você pode ativar e desativar um conjunto de classes CSS em uma tag de uma vez. A diretiva recebe como valor um objeto, cujas chaves serão as classes, e os valores - valores booleanos. A classe será ativada se seu valor for true, e desativada se for false.

Vamos ver na prática. Suponha que temos as seguintes classes:

app/app.component.css.blue {
  color: blue;
}

.bold {
  font-weight: bold;
}

Vamos ver com exemplos como ativar e desativar essas classes para um bloco.

Exemplo

Vamos ativar uma classe e desativar outra:

app/app.component.html<div [ngClass]="{blue: true, bold: false}">
  texto
</div>

Exemplo

Suponha que os estados das classes estão armazenados nas propriedades da classe:

app/app.component.tsexport class AppComponent {
  public isBlue: boolean = true;
  public isBold: boolean = false;
}

Vamos vincular a visibilidade da classe dependendo dos valores das nossas propriedades:

app/app.component.html<div [ngClass]="{blue: isBlue, bold: isBold}">
  texto
</div>

Exemplo

A propriedade pode ser um objeto inteiro com classes e estados:

app/app.component.tsexport class AppComponent {
  public styles = {
    blue: false,
    bold: true,
  }
}

Vamos vincular este objeto ao nosso bloco:

app/app.component.html<div [ngClass]="styles">
  texto
</div>

Exemplo

Podemos obter os valores para o nosso objeto de outras propriedades da classe:

app/app.component.tsexport class AppComponent {
  public isBlue: boolean = false;
  public isBold: boolean = true;

  public styles = {
    blue: this.isBlue,
    bold: this.isBold,
  }
}

Vamos vincular este objeto ao nosso bloco:

app/app.component.html<div [ngClass]="styles">
  texto
</div>

Tarefas Práticas