Angular-এ চাইল্ড কম্পোনেন্টে ডেটা পাঠানো

প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা পাঠানো যায়। এই ডেটা চাইল্ড ক্লাসের প্রপার্টিগুলোতে প্রবেশ করবে। চলুন দেখি কিভাবে এটি করা হয়।

শুরুতে চাইল্ড কম্পোনেন্টের ক্লাসে এমন প্রপার্টি তৈরি করি, যেখানে প্যারেন্ট কম্পোনেন্ট থেকে ডেটা ইম্পোর্ট হবে:

app/user/user.component.tsclass UserComponent {
  public name: string = '';
  public age: number = 0;
}

এখন আমাদের ঘোষণা করতে হবে যে এই প্রপার্টিগুলোতে বাইরে থেকে ডেটা আসবে। এর জন্য বিশেষ ডেকোরেটর Input ব্যবহার করা হয়। এটিকে আমাদের চাইল্ড কম্পোনেন্টে ইম্পোর্ট করি:

app/user/user.component.tsimport { Input } from '@angular/core';

এবং এখন আমাদের প্রপার্টিগুলোর জন্য এই ডেকোরেটর প্রয়োগ করি:

app/user/user.component.tsclass UserComponent {
  @Input()
  public name: string = '';
  
  @Input()
  public age: number = 0;
}

চাইল্ড কম্পোনেন্টের টেমপ্লেট ফাইলে ডেটা আউটপুট যোগ করি:

app/user/user.component.html<p>{{ name }}</p>
<p>{{ age }}</p>

এবং এখন প্যারেন্টের টেমপ্লেটে, চাইল্ড কম্পোনেন্টের ট্যাগ কল করার সময়, এমন অ্যাট্রিবিউট লিখব যার নামগুলো আমাদের চাইল্ড ক্লাসের প্রপার্টির নামের সাথে মিলে। এই অ্যাট্রিবিউটগুলোর মান চাইল্ড ক্লাসের প্রপার্টিতে প্রবেশ করবে:

app/app.component.html<user-data name="john" age="25"></user-data>