სტილების დინამიური ცვლილება Angular-ში

ngClass და ngStyle დირექტივების საშუალებით შეგვიძლია გამონათქვამები მივაბათ ელემენტებს, რის შედეგადაც ჩვენი სტილები დინამიურად შეიცვლება.

მოდით, გავაკეთოთ ისე, რომ ტექსტი დაიფაროს ან გამოჩნდეს active თვისების საშუალებით კომპონენტის კლასიდან:

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

ამისთვის დავწეროთ ფუნქცია toggle, რომელიც მონაცვლეობით ჩართავს ან გამორთავს ამ თვისებას:

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

კომპონენტის CSS ფაილში მივუთითოთ შემდეგი სტილი კლასს:

.hidden {
	display: none;
}

კომპონენტის ტემფლეიტში გავაკეთოთ div, და მივუმატოთ მას CSS კლასი hidden, რომელიც ჩაირთვება ან გაითიშება active თვისებიდან გამომდინარე კომპონენტის კლასიდან:

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

გავაკეთოთ ასევე ღილაკი, whose დაწკაპუნებით გამოიძახება მეთოდი toggle, რომელიც გამოაჩენს ან დაამალავს ჩვენს კომპონენტს:

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

მოცემულია სამი ბლოკი. გააკეთეთ სამი ღილაკი, თითოეული რომელთაგანი გადართავს საკუთარ ბლოკს.