একটি কম্পোনেন্ট হল Angular ইউআই-এর মৌলিক বিল্ডিং ব্লক — একটি TypeScript class যা @Component দ্বারা সজ্জিত এবং স্ক্রিনের একটি অংশ (এর "view") নিয়ন্ত্রণ করে। প্রতিটি Angular অ্যাপ্লিকেশন কম্পোনেন্টের একটি গাছ।
{ } ;
({
: ,
: ,
: [],
})
{
name = ;
() { ; }
}
@Component ডেকোরেটর তিনটি জিনিস একসাথে সংযুক্ত করে: একটি selector (আপনি HTML-এ এটি কীভাবে ব্যবহার করেন), একটি template (মার্কআপ), এবং styles (এই কম্পোনেন্টের জন্য সীমাবদ্ধ)।
<!-- user-card.html — the template binds to the class -->
<h2>{{ name }}</h2> <!-- interpolate a property -->
<button (click)="greet()">Greet</button> <!-- call a method on click -->
ক্লাসের জনসাধারণ্য বৈশিষ্ট্য এবং পদ্ধতিগুলি এর template-এ binding-এর মাধ্যমে সরাসরি অ্যাক্সেসযোগ্য — এটি কীভাবে Angular ডেটা এবং view সংযুক্ত করে তার মূল।
<!-- in another component's template, use the selector -->
<app-user-card></app-user-card>
/* user-card.css — these styles ONLY affect this component */
h2 { color: blue; } /* won't leak to other components' <h2>s */
Angular স্বয়ংক্রিয়ভাবে কম্পোনেন্ট স্টাইলগুলির নির্ধারণ করে (View Encapsulation), তাই CSS কম্পোনেন্টগুলির মধ্যে ছড়িয়ে পড়ে না।
কম্পোনেন্টগুলি হল আপনি কীভাবে প্রতিটি Angular অ্যাপ্লিকেশনের গঠন করেন — template + logic + scoped styles-এর স্বয়ংসম্পূর্ণ ইউনিট, একটি গাছে সংযুক্ত।
@Component ডেকোরেটর (selector, template, styles) বোঝা এবং ক্লাসের বৈশিষ্ট্য/পদ্ধতিগুলি কীভাবে template-এ বাঁধে তা Angular ডেভেলপমেন্টের সম্পূর্ণ ভিত্তি; অন্য সবকিছু কম্পোনেন্ট মডেলের উপর তৈরি।