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;
}

কম্পোনেন্টের টেমপ্লেটে একটি div তৈরি করি, এবং এটিতে একটি CSS ক্লাস hidden যোগ করি, যা কম্পোনেন্ট ক্লাসের active প্রপার্টির উপর নির্ভর করে চালু বা বন্ধ হবে:

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

এছাড়াও একটি বাটন তৈরি করি, যাতে ক্লিক করলে toggle মেথডটি কল হবে, আমাদের কম্পোনেন্টটি দেখাবে বা লুকাবে:

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