Angular-এ রিঅ্যাক্টিভিটি

যেকোনো পাবলিক প্রপার্টির পরিবর্তন হলে, টেমপ্লেটটি রিঅ্যাক্টিভলি সাড়া দেবে, অর্থাৎ তাৎক্ষণিকভাবে পরিবর্তিত হবে। এভাবেই রিঅ্যাক্টিভিটি Angular-এ কাজ করে।

আসুন একটি উদাহরণ দেখি। ধরা যাক আমাদের কাছে একটি প্রপার্টি আছে যাতে টেক্সট রয়েছে:

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

আসুন আমাদের প্রপার্টিটি কোনো ট্যাগে আউটপুট করি:

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

এখন একটি বাটন তৈরি করি, যাতে ক্লিক করলে ক্লাসের একটি মেথড কল হবে:

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

এই মেথডে টেক্সটটি পরিবর্তন করি:

app/app.component.tsexport class AppComponent {
  public text: string = '';
  
  public show(): void {
    this.text = 'hello';
  }
}

এখন, যদি কোড রান করে এবং বাটনে ক্লিক করা হয়, তাহলে ক্লিক করার পরপরই div-এর টেক্সট পরিবর্তিত হবে।