Stilu dinamiskā mainīšana Angular

Izmantojot direktīvas ngClass un ngStyle, var saistīt izteiksmes ar elementiem, pateicoties kam mūsu stili mainīsies dinamiski.

Padarīsim tā, lai teksts tiktu paslēpts vai rādīts, izmantojot komponenta klases īpašību active:

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

Lai to izdarītu, uzrakstīsim funkciju toggle, kas pārmaiņus ieslēgs vai izslēgs šo īpašību:

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

Komponenta CSS failā iestatām šādu stilu klasei:

.hidden {
	display: none;
}

Komponenta veidnē izveidosim div, un pievienosim tam CSS klasi hidden, kas tiks ieslēgta vai izslēgta atkarībā no īpašības active no komponenta klases:

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

Izveidosim arī pogu, kuras nospiešanas rezultātā tiks izsaukta metode toggle, parādot vai slēpjot mūsu komponentu:

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

Doti trīs bloki. Izveidojiet trīs pogas, katra no tām pārslēdz savu bloku.