# कंपोनेंट की संरचना — एंगुलर

Source: https://www.geekswithgeeks.com/hi/angular/ng-component-anatomy

> डेकोरेटर, टेम्पलेट और क्लास साथ मिलकर काम करते हैं।

## तीन हिस्से

`@Component` इसे कॉन्फ़िगर करता है, टेम्पलेट HTML तय करता है, और क्लास डेटा व लॉजिक रखती है।

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `<h1>Hello, {{ name }}!</h1>`,
})
export class GreetingComponent {
  name = 'Angular';
}
```

## सेलेक्टर और टेम्पलेट

`selector` वह कस्टम HTML टैग है जिसे दूसरे टेम्पलेट उपयोग करते हैं, जैसे `<app-greeting>`। `template` (या `templateUrl`) यह तय करता है कि क्या रेंडर होगा।

## styleUrl भी

एक कंपोनेंट में आमतौर पर `styleUrl: './greeting.component.css'` भी होता है, जो केवल उसी कंपोनेंट के टेम्पलेट पर लागू स्कोप्ड CSS देता है।