Bindning av CSS-klasser i Angular

I Angular kan man aktivera och inaktivera tillämpning av CSS-klasser för ett block. Detta görs med hjälp av ett taggattribut, skrivet i följande format:

[class.klassnamn]="true eller false"

Låt oss se på praktiken. Låt oss säga att vi har följande klasser:

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

Låt oss se med exempel hur man aktiverar och inaktiverar dessa klasser för ett block.

Exempel

Låt oss aktivera en klass och inaktivera en annan:

<div [class.blue]="true" [class.bold]="false">
	text
</div>

Exempel

Låt klassernas tillstånd lagras i klassens egenskaper:

export class AppComponent {
	public isBlue: boolean = true;
	public isBold: boolean = false;
}

Låt oss binda klassens synlighet beroende på våra egenskapers värden:

<div [class.blue]="isBlue" [class.bold]="isBold">
	text
</div>

Praktiska uppgifter

Följande CSS-klass är given:

.hidden {
	visibility: hidden;
}

Bind denna klass till ett block. Skapa en knapp, vid klick på vilken blocket kommer att döljas eller visas.