Angular-এ শর্তসাপেক্ষ প্রতিক্রিয়াশীলতা

প্রতিক্রিয়াশীলতা ngIf শর্তের সাথেও কাজ করবে। এর মানে হল যে আমরা ক্লাসের বৈশিষ্ট্যে কী রয়েছে তার উপর নির্ভর করে একটি ব্লক দেখাতে বা লুকিয়ে রাখতে পারি।

আসুন অনুশীলনে চেষ্টা করি। আমাদের নিম্নলিখিত ব্লক আছে বলে ধরা যাক

app/app.component.html<div>
  text
</div>

আসুন একটি শর্ত দ্বারা এটি দেখানো বা লুকানো যাক:

app/app.component.html<div *ngIf="isShow">
  text
</div>

এখন দুটি বাটন তৈরি করা যাক। প্রথমটিতে ক্লিক করলে আমাদের ব্লকটি দেখাবে, এবং দ্বিতীয়টিতে ক্লিক করলে লুকিয়ে দেবে:

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

আসুন কম্পোনেন্ট ক্লাসে একটি বৈশিষ্ট্য যোগ করি যা নিয়ন্ত্রণ করবে ব্লকটি দেখানো হচ্ছে নাকি লুকানো আছে:

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

এবং এখন ব্লক দেখানো এবং লুকানোর জন্য আমাদের পদ্ধতিগুলির বাস্তবায়ন লিখি:

app/app.component.tsexport class AppComponent {
  public isShow: boolean = true;
  
  public show(): void {
    this.isShow = true;
  }
  public hide(): void {
    this.isShow = false;
  }
}