Angular-এ কম্পোনেন্ট তৈরি করা একটি গুরুত্বপূর্ণ কাজ। Angular CLI (Command Line Interface) ব্যবহার করে খুব সহজেই নতুন কম্পোনেন্ট তৈরি করা যায়। CLI ডেভেলপারদের কমান্ড লাইন ইন্টারফেসের মাধ্যমে অটোমেটেড প্রক্রিয়ায় কোড জেনারেট করতে সাহায্য করে, যা উন্নয়ন প্রক্রিয়া দ্রুত এবং কার্যকরী করে তোলে।

কম্পোনেন্ট কী?

Angular-এ কম্পোনেন্ট হলো মূল কাঠামো বা ব্লক যা UI তৈরি করে এবং অ্যাপ্লিকেশনের ভিউ নির্ধারণ করে। প্রতিটি কম্পোনেন্টে থাকে:

1. HTML টেম্পলেট – যেটি UI উপস্থাপন করে।
2. CSS/SCSS স্টাইল – UI এর স্টাইলিংয়ের জন্য।
3. TypeScript ক্লাস – যা কম্পোনেন্টের লজিক ধারণ করে।
4. Metadata – @Component ডেকোরেটর যা Angular কে জানিয়ে দেয় যে এটি একটি কম্পোনেন্ট।

Angular CLI দিয়ে কম্পোনেন্ট তৈরি করার পদ্ধতি

Angular CLI দিয়ে কম্পোনেন্ট তৈরি করতে হলে নিচের স্টেপগুলো অনুসরণ করতে হবে:

1. Angular CLI ইনস্টলেশন

প্রথমে, যদি আপনি Angular CLI ইনস্টল না করে থাকেন, তাহলে নিচের কমান্ড দিয়ে এটি ইনস্টল করতে হবে:

npm install -g @angular/cli

2. Angular প্রজেক্ট তৈরি করা

এখন, যদি আপনার অ্যাপ্লিকেশন না থাকে, তাহলে একটি নতুন Angular প্রজেক্ট তৈরি করতে হবে:

ng new my-angular-app

এখানে my-angular-app আপনার অ্যাপ্লিকেশনের নাম।

3. কম্পোনেন্ট তৈরি করা

এখন, CLI ব্যবহার করে কম্পোনেন্ট তৈরি করা যাবে। নিম্নলিখিত কমান্ডটি ব্যবহার করুন:

ng generate component component-name

অথবা শর্টকাট কমান্ড:

ng g c component-name

এখানে, component-name হলো আপনার তৈরি করতে চান এমন কম্পোনেন্টের নাম। উদাহরণস্বরূপ, যদি আপনি একটি user-profile নামক কম্পোনেন্ট তৈরি করতে চান, তাহলে কমান্ড হবে:

ng g c user-profile

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

• user-profile.component.ts (TypeScript ফাইল)
• user-profile.component.html (HTML টেম্পলেট)
• user-profile.component.css (CSS স্টাইল)
• user-profile.component.spec.ts (টেস্ট ফাইল)

এছাড়া, Angular CLI আপনার AppModule ফাইলে কম্পোনেন্টটিকে অটোমেটিকভাবে যোগ করে দেবে।

কম্পোনেন্ট ফাইলের স্ট্রাকচার

নতুন কম্পোনেন্ট তৈরি করার পর, আপনি একটি সাধারণ স্ট্রাকচার পাবেন:

1. user-profile.component.ts

এটি কম্পোনেন্টের TypeScript ফাইল, যেখানে কম্পোনেন্টের লজিক এবং মেটাডেটা থাকবে।

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

2. user-profile.component.html

এটি কম্পোনেন্টের HTML টেম্পলেট, যা UI উপস্থাপন করে।

<div class="user-profile">
  <h1>User Profile</h1>
  <p>Welcome to the user profile page!</p>
</div>

3. user-profile.component.css

এটি কম্পোনেন্টের স্টাইল ফাইল, যা টেম্পলেটের স্টাইল নির্ধারণ করে।

.user-profile {
  text-align: center;
  font-size: 20px;
}

কম্পোনেন্ট ব্যবহার করা

নতুন তৈরি করা কম্পোনেন্টটি ব্যবহার করার জন্য, আপনাকে AppComponent বা অন্য কোনো কম্পোনেন্টের HTML টেম্পলেটে <app-user-profile></app-user-profile> এই ট্যাগটি ব্যবহার করতে হবে।

উদাহরণ:

<!-- app.component.html -->
<div style="text-align:center">
  <h1>Welcome to Angular!</h1>
  <app-user-profile></app-user-profile>
</div>

এখানে, <app-user-profile></app-user-profile> হলো আপনার তৈরি করা UserProfileComponent এর সিলেক্টর, যা UI তে সেই কম্পোনেন্ট প্রদর্শন করবে।

CLI দিয়ে কম্পোনেন্ট তৈরি করার আরো কিছু অপশন

CLI কম্পোনেন্ট তৈরি করার সময় কিছু অতিরিক্ত ফ্ল্যাগ ব্যবহার করা যেতে পারে:

1. --inline-template

যদি আপনি HTML টেম্পলেটটি কম্পোনেন্টের TypeScript ফাইলে রাখতে চান, তাহলে এটি ব্যবহার করা যায়:

ng g c user-profile --inline-template

2. --inline-style

যদি আপনি CSS কোডটি কম্পোনেন্টের TypeScript ফাইলে রাখতে চান, তাহলে এটি ব্যবহার করা যায়:

ng g c user-profile --inline-style

3. --module

এই ফ্ল্যাগটি দিয়ে আপনি কম্পোনেন্টটি কোন মডিউলে যোগ করবেন তা নির্দিষ্ট করতে পারবেন:

ng g c user-profile --module=app

এটি user-profile কম্পোনেন্টটিকে app.module.ts মডিউলে যোগ করবে।

সারাংশ

Angular CLI ব্যবহার করে কম্পোনেন্ট তৈরি করা একটি সহজ এবং কার্যকর পদ্ধতি, যা ডেভেলপমেন্ট প্রক্রিয়া দ্রুত এবং সঠিকভাবে সম্পন্ন করতে সাহায্য করে। এই পদ্ধতিতে নতুন কম্পোনেন্ট তৈরি করা, কোড অটোমেটেডভাবে জেনারেট করা, এবং মডিউল ও কম্পোনেন্টের মধ্যে ডিপেন্ডেন্সি ম্যানেজ করা অনেক সহজ হয়।