Angular-da stilleri dinamiki üýtgetmek

ngClass we ngStyle direktiwalary ýardamynda elementlere ifadeleri birikdirip bileris, bu bolsa bizleriň stillerimiziň dynamiki üýtgemegine getirer.

Geliň, komponentiň klasynyň active hasiyetini ulanmak bilen tekst görkezilýän ýa-da gizlenýän etmeli:

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

Bun üçin toggle funksiýasyny ýazalyň, ýöne bu hasiýeti açjak ýa-da ýapjak:

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

Komponentiň CSS faýlynda aşakdaky stili klas üçin kesgitleýäris:

.hidden {
	display: none;
}

Komponentiň şablonunda bir div döredeliň we oňa CSS klasyny hidden goşalyň, bu klas komponentiň klasynyň active hasiýetine baglylykda goşular ýa-da aýrylar:

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

Şeýle hem, basylanda toggle metodu çagyrylar we komponentimizi görkezer ýa-da gizler düwmäni ýasalyň:

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

Üç blok berlen. Her biri öz blogyny açyp-ýapjak üç düwmäni ýasalyň.