Vinculando Estilos CSS no Angular

No Angular, também é possível adicionar estilos diretamente a um bloco. Isso é feito por meio de um atributo de tag, escrito no seguinte formato:

[style.propriedadeDeEstilo]="valor da propriedade"

Neste caso, os nomes das propriedades CSS que possuem hífen em seu interior, no nosso caso, serão escritos em camelCase. Vejamos com exemplos como isso funciona.

Exemplo

Vamos definir o fundo de um elemento:

<div [style.backgroundColor]="'blue'">
	text
</div>

Exemplo

Suponha que temos uma propriedade que contém a cor de fundo:

export class AppComponent {
	public value: string = 'red';
}

Vamos aplicar essa propriedade como valor para o estilo:

<div [style.backgroundColor]="value">
	text
</div>

Exemplo

Suponha que temos uma propriedade booleana:

export class AppComponent {
	public isActive: boolean = true;
}

Vamos vincular valores diferentes à propriedade CSS dependendo do conteúdo da propriedade booleana. Vamos usar para isso o operador ternário:

<div [style.backgroundColor]="isActive ? 'blue' : 'red'">
	text
</div>

Problemas Práticos

Dado um bloco. Faça com que o primeiro clique no bloco o pinte de vermelho, e o segundo clique - de verde.

Dado um bloco. Dado um botão. Faça com que clicar no botão dobre a largura do bloco.