Angular-এ কম্পোনেন্ট ক্লাস ফাইল

যেকোনো কম্পোনেন্টের মূল অংশ হল এর কার্যকারিতা, অর্থাৎ আসলে এর প্রোগ্রাম। Angular-এ, একটি কম্পোনেন্টের কার্যকারিতা TypeScript ভাষায় লেখা হয় এবং এটি একটি OOP ক্লাস হিসাবে উপস্থাপিত হয়।

প্রতিটি কম্পোনেন্টে, এই ক্লাসটি .ts এক্সটেনশন সহ একটি ফাইলে অবস্থিত। আমাদের মূল কম্পোনেন্টে এটি হবে app.component.ts ফাইল।

এই ফাইলের বিষয়বস্তুর সাথে পরিচিত হই। প্রথমে আমাদের কম্পোনেন্টের ক্লাসে মনোযোগ দিন:

export class AppComponent {
	title: string = 'test';
}

এই ক্লাসে @Component ডেকোরেটর প্রয়োগ করা হয়। এই ডেকোরেটর তার প্যারামিটার হিসেবে একটি অবজেক্ট নেয়, যা আমাদের কম্পোনেন্ট কনফিগার করে:

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

templateUrl বৈশিষ্ট্যে আমাদের কম্পোনেন্টের মার্কআপ ধারণকারী ফাইলের পথ নির্দিষ্ট করা হয়েছে।

styleUrls বৈশিষ্ট্যে CSS ফাইলগুলির পথের একটি অ্যারে নির্দিষ্ট করা হয়েছে, যা আমাদের কম্পোনেন্টের মার্কআপ স্টাইল করে। আপনি দেখতে পাচ্ছেন, স্টাইল ফাইল একটি以上 নাও হতে পারে।

selector বৈশিষ্ট্যে HTML ট্যাগের সিলেক্টর নির্দিষ্ট করা হয়েছে, যেখানে আমাদের কম্পোনেন্টের HTML কোড আউটপুট (মাউন্ট) হবে। আমাদের ক্ষেত্রে, আমরা app-root নাম দেখতে পাই। এই নামটি একই নামের একটি ট্যাগের সাথে মিলে যায়। এই ট্যাগটি src/index.html লেআউট ফাইলে লেখা আছে। যে স্থানে এই ট্যাগটি লেখা আছে, সেখানেই আমাদের কম্পোনেন্টের মার্কআপ সন্নিবেশিত হবে।

imports বৈশিষ্ট্যে那些 মডিউলগুলি নির্দেশিত হয়েছে, যেগুলি আমাদের কম্পোনেন্টে ইম্পোর্ট করা হয়।

standalone বৈশিষ্ট্যে সর্বদা true মান নির্দেশিত হবে। বর্তমানে এটি Angular-এর একটি সার্ভিস-সম্পর্কিত জিনিস, তাই এখনই এতে গভীরভাবে চিন্তা করবেন না।

app.component.ts ফাইলটি খুলুন এবং এটি অধ্যয়ন করুন।

কいくつかの স্টাইল ফাইল তৈরি করুন এবং ডেকোরেটরে সেগুলি সংযোগ করুন।