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

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

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

export class AppComponent {
	public text: string = '';
}

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

<div>
	{{ text }}
</div>

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

<button (click)="show()">
	show
</button>

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

export class AppComponent {
	public text: string = '';
	
	public show(): void {
		this.text = 'hello';
	}
}

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

একটি div এবং দুটি বাটন তৈরি করুন। এমনভাবে সেটআপ করুন, যাতে প্রথম বাটনে ক্লিক করলে div-এ একটি টেক্সট যায়, এবং দ্বিতীয় বাটনে ক্লিক করলে - অন্য একটি টেক্সট যায়।