एक component Angular UI को आधारभूत निर्माण खण्ड हो — एक TypeScript class जो @Component decorator सहित सजिएको हुन्छ र स्क्रिनको एक खण्ड (यसको "view") नियन्त्रण गर्छ। हरेक Angular अनुप्रयोग components को एक tree हो।
Component को संरचना
import { Component } from "@angular/core";
@Component({
selector: "app-user-card", // the custom HTML tag: <app-user-card>
templateUrl: "./user-card.html", // the view (or inline `template: '...'`)
styleUrls: ["./user-card.css"], // scoped styles for this component
})
export class UserCardComponent {
name = "Ann"; // properties → available in the template
greet() { return `Hi ${this.name}`; } // methods → callable from the template
}
@Component decorator तीन कुरा लाई जोड्छ: एक selector (तपाइँ यो HTML मा कसरी प्रयोग गर्नुहुन्छ), एक template (markup), र styles (यो component मा सीमित)।
Class ले logic र data राख्छ
<!-- 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 -->
Class को public properties र methods सीधै यसको template मा binding मार्फत पहुँचयोग्य छन् — यो Angular ले data र view लाई कसरी जोड्छ भन्ने कोरको आधार हो।
Component प्रयोग गर्दै
<!-- in another component's template, use the selector -->
<app-user-card></app-user-card>
Styles पूर्वनिर्धारित रूपमा encapsulated छन्
/* user-card.css — these styles ONLY affect this component */
h2 { color: blue; } /* won't leak to other components' <h2>s */
Angular component styles लाई स्वचालित रूपमा scopes गर्छ (View Encapsulation), त्यसैले CSS components बीचमा leak हुँदैन।
किन यो महत्त्वपूर्ण छ
Components हरेक Angular अनुप्रयोग को संरचना कसरी गर्नुहुन्छ — template + logic + scoped styles को आत्मनिर्भर एकाइहरु, tree मा composed।
@Component decorator (selector, template, styles) लाई बुझ्नु र class को properties/methods ले template सँग कसरी bind हुन्छन् भन्ने कुरा Angular development को पूर्ण आधार हो; अरु सबै कुरा component model मा आधारित छ।