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 դաս: Թող նրանցից մեկը սահմանի բլոկի ֆոնը, իսկ երկրորդը՝ տառատեսակի չափը:

Ստեղծեք երկու կոճակ: Թող առաջին կոճակի վրա սեղմելը թոգլի առաջին դասը, իսկ երկրորդի վրա սեղմելը՝ թոգլի երկրորդ դասը: