કમ્પોનેન્ટ 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 -->
ક્લાસના જાહેર ગુણધર્મો અને પદ્ધતિઓ તેના template માં બાઈન્ડિંગ દ્વારા સીધી રીતે સુલભ છે — આ 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 એપ્લીકેશનને રચે છો — template + તર્કશાસ્ત્ર + પ્રમાણિત શૈલીઓના સ્વતંત્ર એકમો, વૃક્ષમાં સંમિશ્રિત.
@Component ડેકોરેટર (selector, template, styles) અને ક્લાસના ગુણધર્મો/પદ્ધતિઓ template સાથે કેવી રીતે બાઈન્ડ થાય છે તે સમજવું એ Angular વિકાસનું સંપૂર્ણ ভিত્તિ છે; બાકી બધું કમ્પોનેન્ટ મોડેલ પર બનાવવામાં આવે છે.