Angular හි CSS පන්ති සමූහ එකතු කිරීම

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 පන්ති දෙකක් සාදන්න. ඒවායින් එකක් කොටසක පසුබිම නිර්වචනය කරන අතර දෙවැන්න - අකුරු ප්‍රමාණය නිර්වචනය කරයි.

බොත්තම් දෙකක් සාදන්න. පළමු බොත්තම ක්ලික් කිරීම පළමු පන්තිය toggle කරන අතර, දෙවන බොත්තම - දෙවන පන්තිය toggle කරයි.