कंपोनेंट Angular UI का मौलिक निर्माण ब्लॉक है — @Component से सजाई गई एक TypeScript क्लास जो स्क्रीन के एक हिस्से (उसके "दृश्य") को नियंत्रित करती है। प्रत्येक 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 -->
क्लास के सार्वजनिक गुण और विधियां बाइंडिंग के माध्यम से इसके टेम्प्लेट में सीधे सुलभ हैं — यह Angular द्वारा डेटा और दृश्य को जोड़ने के तरीके का मूल है।
<!-- 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 ऐप को संरचित करते हैं — टेम्पलेट + तर्क + स्कोप किए गए स्टाइलों की आत्मनिर्भर इकाइयां, एक पेड़ में रचित।
@Component डेकोरेटर (selector, template, styles) को समझना और यह कि कक्षा के गुण/विधियां टेम्पलेट से कैसे बंधती हैं, यह Angular विकास की पूर्ण नींव है; बाकी सब कुछ कंपोनेंट मॉडल पर बनाया गया है।