CSS კლასების მასობრივი მიბმა Angular-ში

ngClass დირექტივის საშუალებით შესაძლებელია ტეგში CSS კლასების მთელი ნაკრების ჩართვა და გამორთვა. დირექტივა მნიშვნელობად იღებს ობიექტს, რომლის გასაღებებია კლასები, ხოლო მნიშვნელობები - ლოგიკური მნიშვნელობები. კლასი ჩაირთვება, თუ მისთვის მითითებულია მნიშვნელობა true, და გაითიშება, თუ false.

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

.blue {
	color: blue;
}

.bold {
	font-weight: bold;
}

მაგალითებით ვნახოთ, როგორ ჩავრთოთ და გამოვრთოთ ეს კლასები ბლოკისთვის.

მაგალითი

ჩავრთოთ ერთი კლასი და გამოვრთოთ მეორე:

<div [ngClass]="{blue: true, bold: false}">
	text
</div>

მაგალითი

დავუშვათ, კლასების მდგომარეობა ინახება კლასის თვისებებში:

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

მივაბათ კლასის ხილვადობა ჩვენი თვისებების მნიშვნელობებიდან გამომდინარე:

<div [ngClass]="{blue: isBlue, bold: isBold}">
	text
</div>

მაგალითი

თვისებაში შეიძლება იყოს მთელი ობიექტი კლასებითა და მდგომარეობებით:

export class AppComponent {
	public styles = {
		blue: false,
		bold: true,
	}
}

მივაბათ ეს ობიექტი ჩვენს ბლოკს:

<div [ngClass]="styles">
	text
</div>

მაგალითი

შესაძლებელია ჩვენი ობიექტის მნიშვნელობების მიღება კლასის სხვა თვისებებიდან:

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

	public styles = {
		blue: this.isBlue,
		bold: this.isBold,
	}
}

მივაბათ ეს ობიექტი ჩვენს ბლოკს:

<div [ngClass]="styles">
	text
</div>

პრაქტიკული ამოცანები

შექმენით ორი CSS კლასი. ერთი მათგანი განსაზღვრავდეს ბლოკის ფონს, ხოლო მეორე - ტექსტის ზომას.

გააკეთეთ ორი ღილაკი. პირველ ღილაკზე დაჭერა ჩართავდეს/გამორთავდეს პირველ კლასს, ხოლო მეორეზე დაჭერა - ჩართავდეს/გამორთავდეს მეორე კლასს.