Angular में स्टाइल्स को डायनामिक रूप से बदलना

ngClass और ngStyle डायरेक्टिव्स की मदद से एलिमेंट्स को एक्सप्रेशन्स बाइंड किए जा सकते हैं, जिसके कारण हमारी स्टाइल्स डायनामिक रूप से बदल जाएंगी।

आइए ऐसा करें कि active प्रॉपर्टी की मदद से कंपोनेंट के क्लास का टेक्स्ट छिपे या दिखाई दे:

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

इसके लिए toggle फंक्शन लिखें, जो बारी-बारी से इस प्रॉपर्टी को चालू या बंद करेगी:

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

कंपोनेंट की CSS फाइल में क्लास को निम्नलिखित स्टाइल सेट करें:

app/app.component.css.hidden {
  display: none;
}

कंपोनेंट के टेम्पलेट में एक डिव बनाएं, और उसे CSS क्लास hidden दें, जो कंपोनेंट क्लास की active प्रॉपर्टी पर निर्भर करते हुए चालू या बंद होगी:

app/app.component.html<div [ngClass]="{hidden: active}">
  text
</div>

एक बटन भी बनाएं, जिस पर क्लिक करने पर toggle मेथड कॉल होगी, जो हमारे कंपोनेंट को दिखाएगी या छिपाएगी:

app/app.component.html<button (click)="toggle()">
  toggle
</button>