Dynamisch wijzigen van stijlen in Angular

Met de richtlijnen ngClass en ngStyle kunnen expressies worden gebonden aan elementen, waardoor onze stijlen dynamisch zullen veranderen.

Laten we ervoor zorgen dat tekst wordt verborgen of getoond met behulp van de eigenschap active van de componentklasse:

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

Schrijf hiervoor de functie toggle, die afwisselend deze eigenschap in- of uitschakelt:

export class AppComponent {
	active: boolean = true;
	
	toggle() {
		this.active = !this.active;
	}
}

In het CSS-bestand van de component definiëren we de volgende stijl voor de klasse:

.hidden {
	display: none;
}

Laten we in de template van de component een div maken, en hieraan de CSS-klasse hidden toevoegen, die wordt in- of uitgeschakeld afhankelijk van de eigenschap active uit de klasse van de component:

<div [ngClass]="{hidden: active}">
	text
</div>

Laten we ook een knop maken, waarop bij het klikken de methode toggle wordt aangeroepen, waardoor onze component wordt getoond of verborgen:

<button (click)="toggle()">
	toggle
</button>

Er zijn drie blokken gegeven. Maak drie knoppen, elk van hen moet zijn eigen blok tonen/verbergen.