Angular-এ ডেটা টু-ওয়ে বাইন্ডিং

Angular-এ এটি করা সম্ভব যাতে ইনপুটে টেক্সট ইনপুট করার সাথে সাথে, এই টেক্সট স্বয়ংক্রিয়ভাবে ক্লাসের প্রপার্টিতে চলে আসে। এটিকে বলা হয় ডেটা টু-ওয়ে বাইন্ডিং।

এই ধরনের বাইন্ডিং কাজ করতে শুরু করার জন্য, প্রথমে এটি সক্ষম করতে হবে। এর জন্য কম্পোনেন্ট ফাইলে FormsModule ইম্পোর্ট করি:

import { FormsModule } from '@angular/forms';

এবং তারপর @Component ডেকোরেটরের imports প্রপার্টিতে যোগ করি:

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [FormsModule, UserComponent],
	templateUrl: './app.component.html',
	styleUrl: './app.component.css'
})

এর পরে ডেটা টু-ওয়ে বাইন্ডিং সক্ষম হবে এবং আমরা এটি ব্যবহার করতে পারব। চলুন এটি করি।

প্রথমে একটি ক্লাস প্রপার্টি ডিক্লেয়ার করি, যা আমরা পরে টু-ওয়ে বাইন্ডিং-এর অধীন করব:

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

ধরুন আমাদের একটি div এবং একটি input আছে। ধরা যাক div-এ ক্লাসের একটি নির্দিষ্ট প্রপার্টি ডিসপ্লে হয়:

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

চলুন আমাদের text প্রপার্টিকে ইনপুট পরিবর্তনের সাথে বাইন্ড করি। এর জন্য ইনপুটে একটি বিশেষ ডাইরেকটিভ [(ngModel)] লিখতে হবে, যার মান হিসেবে আমাদের ক্লাসের প্রপার্টি উল্লেখ করতে হবে:

<div>
	{{ text }}
</div>
<input [(ngModel)]="text">

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

একটি ইনপুট এবং একটি প্যারাগ্রাফ দেওয়া আছে। ইনপুটে একটি সংখ্যা ডিসপ্লে হয়। এমন করুন যাতে ইনপুটে সংখ্যা ইনপুট করার সাথে সাথে, প্যারাগ্রাফে সেই সংখ্যার বর্গ ডিসপ্লে হয়।

দুটি ইনপুট এবং একটি প্যারাগ্রাফ দেওয়া আছে। ইনপুটে সংখ্যা ইনপুট করা হয়। এমন করুন যাতে প্যারাগ্রাফে ইনপুট করা সংখ্যাগুলোর যোগফল ডিসপ্লে হয়।