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

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

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

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

उदाहरण

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

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

उदाहरण

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

app/app.component.tsexport class AppComponent {
  public value: string = 'red';
}

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

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

उदाहरण

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

app/app.component.tsexport class AppComponent {
  public isActive: boolean = true;
}

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

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

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