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

টিউটোরিয়ালের একদম শুরুতে যেমন উল্লেখ করা হয়েছিল, Angular-এ পুরো প্রকল্পটি কম্পোনেন্টে বিভক্ত হয়। পূর্ববর্তী পাঠগুলোতে আমরা শুধুমাত্র ডিফল্টভাবে তৈরি মূল কম্পোনেন্ট নিয়ে কাজ করেছি। আসুন এখন চাইল্ড কম্পোনেন্ট তৈরি করতে শিখি।

নতুন কম্পোনেন্টগুলোর কোড Angular দ্বারা স্বয়ংক্রিয়ভাবে একটি বিশেষ টার্মিনাল কমান্ডের মাধ্যমে তৈরি হয়: generate component। component শব্দটির পরে আমাদের নতুন কম্পোনেন্টের নাম লিখতে হবে। ধরা যাক আমরা একটি user কম্পোনেন্ট তৈরি করতে চাই:

ng generate component user

কমান্ডটি কার্যকর করার পরে আমরা দেখতে পাব যে আমাদের একটি নতুন ফোল্ডার app/user তৈরি হয়েছে। এতে কম্পোনেন্টের সমস্ত স্ট্যান্ডার্ড ফাইল থাকবে।

user.component.ts কম্পোনেন্ট ফাইলে স্বয়ংক্রিয়ভাবে একটি কম্পোনেন্ট ডেকোরেটর তৈরি হবে:

@Component({
	selector: 'app-user',
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

এছাড়াও এই ফাইলে কম্পোনেন্টের ক্লাসটি স্বয়ংক্রিয়ভাবে তৈরি হবে:

export class UserComponent {

}

এখন আমাদের চাইল্ড কম্পোনেন্টটিকে প্যারেন্ট কম্পোনেন্টের সাথে সংযোগ করতে হবে। ধরা যাক প্যারেন্টটি হবে app কম্পোনেন্ট, যা ফ্রেমওয়ার্ক ইনস্টল করার সময় ডিফল্টভাবে থাকে। এতে আমাদের কম্পোনেন্টটি ইম্পোর্ট করি:

import { UserComponent } from './user/user.component';

কম্পোনেন্ট ডেকোরেটরে imports কী-তে আমাদের ইম্পোর্ট করা কম্পোনেন্টটি উল্লেখ করি:

@Component({
	selector: 'app-root',
	imports: [UserComponent], // এখানে
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

এখন আমরা চাইল্ড কম্পোনেন্টের বিষয়বস্তু প্যারেন্ট কম্পোনেন্টে দেখাতে পারি। এর জন্য প্যারেন্টের টেমপ্লেট ফাইলে একটি বিশেষ ট্যাগ লিখতে হবে, যার নাম চাইল্ডের @Component ডেকোরেটরের selector প্রপার্টিতে নির্ধারণ করা আছে। আমাদের ক্ষেত্রে এটি হলো app-user ট্যাগ। এটিকে প্যারেন্টের টেমপ্লেটে লিখি:

কিছু লেখা
<app-user></app-user>

ProductComponent কম্পোনেন্টটি জেনারেট করুন। এই কম্পোনেন্টটি আপনার প্রকল্পের প্রধান কম্পোনেন্টের সাথে সংযুক্ত করুন।

চাইল্ড কম্পোনেন্টের টেমপ্লেটে পরিবর্তন করুন। নিশ্চিত হন যে সেগুলো ব্রাউজারে প্রয়োগ হয়েছে।

চাইল্ড কম্পোনেন্টের CSS স্টাইলগুলি পরিবর্তন করুন। নিশ্চিত হন যে সেগুলো ব্রাউজারে প্রয়োগ হয়েছে।

চাইল্ড কম্পোনেন্টে name এবং price প্রপার্টি তৈরি করুন। তাদের মান চাইল্ড কম্পোনেন্টের টেমপ্লেটে দেখান।