Angular में CSS स्टाइल बाइंडिंग

Angular में हम सीधे तौर पर ब्लॉक के लिए स्टाइल जोड़ सकते हैं। यह टैग के एट्रिब्यूट का उपयोग करके किया जाता है, जो निम्नलिखित फॉर्मेट में लिखा जाता है:

[style.स्टाइलप्रॉपर्टी]="प्रॉपर्टी का मान"

इस मामले में, CSS प्रॉपर्टी के नाम जिनमें हाइफन होता है, हमारे केस में camelCase में लिखे जाएंगे। आइए उदाहरणों के माध्यम से देखें कि यह कैसे काम करता है।

उदाहरण

एलिमेंट को बैकग्राउंड दें:

<div [style.backgroundColor]="'blue'">
	text
</div>

उदाहरण

मान लीजिए हमारे पास एक प्रॉपर्टी है, जिसमें बैकग्राउंड का रंग है:

export class AppComponent {
	public value: string = 'red';
}

आइए इस प्रॉपर्टी को स्टाइल के मान के रूप में लागू करें:

<div [style.backgroundColor]="value">
	text
</div>

उदाहरण

मान लीजिए हमारे पास एक बूलियन प्रॉपर्टी है:

export class AppComponent {
	public isActive: boolean = true;
}

बूलियन प्रॉपर्टी की सामग्री के आधार पर CSS प्रॉपर्टी को अलग-अलग मान बाइंड करेंगे। इसके लिए टर्नरी ऑपरेटर का उपयोग करें:

<div [style.backgroundColor]="isActive ? 'blue' : 'red'">
	text
</div>

प्रैक्टिकल टास्क्स

एक ब्लॉक दिया गया है। ऐसा करें कि ब्लॉक पर पहला क्लिक उसे लाल रंग में कर दे, और दूसरा क्लिक - हरे रंग में।

एक ब्लॉक दिया गया है। एक बटन दी गई है। ऐसा करें कि बटन दबाने पर ब्लॉक की चौड़ाई दोगुनी हो जाए।