Angular-এ টেমপ্লেট ভেরিয়েবল
Angular-এ, টেমপ্লেট ভেরিয়েবল ব্যবহার করে পৃষ্ঠার ট্যাগগুলিতে অ্যাক্সেস পাওয়া সম্ভব।
এগুলি একটি ট্যাগকে একটি ভেরিয়েবলের সাথে বাঁধা এবং কম্পোনেন্টের কাজ করার সময় এটিকে রেফারেন্স করতে দেয়। এমন একটি ভেরিয়েবল ঘোষণা করতে, এর নামের আগে # চিহ্ন বসাতে হবে।
আসুন ব্যবহারিকভাবে দেখি। ধরা যাক, আমাদের কাছে একটি div আছে। এটিকে একটি টেমপ্লেট ভেরিয়েবলে লিখি:
<div #userName>
text
</div>
এখন userName ভেরিয়েবলে আমাদের div-এর DOM এলিমেন্টের রেফারেন্স থাকবে।
এবং আমরা এটির সাথে বেসিক JavaScript-এ যেভাবে কাজ করা হয় সেভাবে কাজ করতে পারি।
উদাহরণস্বরূপ, আসুন এই div-এর টেক্সটটি অন্য একটি ট্যাগে আউটপুট করি:
<div>
{{ userName.textContent }}
</div>
একটি div দেওয়া আছে। একটি ছবি দেওয়া আছে। ছবিটির রেফারেন্স একটি টেমপ্লেট ভেরিয়েবলে লিখুন। div-এর ভিতরে আমাদের ছবির src আউটপুট করুন।
