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

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

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

app/app.component.tsimport { FormsModule } from '@angular/forms';

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

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

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

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

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

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

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

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

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

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