Data-binding av CSS-stilar i Angular

I Angular kan man också direkt lägga till stilar för ett block. Detta görs med hjälp av ett tagg-attribut, skrivet i följande format:

[style.styleProperty]="egenskapsvärde"

CSS-egenskapsnamn som innehåller bindestreck skrivs i det här fallet i camelCase. Låt oss titta på exempel på hur det här fungerar.

Exempel

Låt oss sätta bakgrunden för ett element:

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

Antag att vi har en egenskap som innehåller bakgrundsfärgen:

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

Låt oss använda den här egenskapen som värde för stilen:

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

Antag att vi har en boolesk egenskap:

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

Låt oss binda olika värden till CSS- egenskapen beroende på innehållet i den booleska egenskapen. Vi använder ternary operator för detta:

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

Givet ett block. Gör så att det första klicket på blocket färgar det i röd färg, och det andra klicket - i grön färg.

Givet ett block. Given en knapp. Gör så att att klicka på knappen fördubblar blockets bredd.