एक घटक हा 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 विकासाचा संपूर्ण आधार आहे; बाकी सर्वकाही घटक मॉडेलवर तयार केले जाते.