Course Progress 26%

Angular Component Metadata

← Angular Components Angular Component Communication →

Angular में Component Metadata वो configuration है जो Angular को बताती है कि component कैसे behave करेगा। Metadata @Component decorator के अंदर define किया जाता है और component का selector, template, styles, providers, standalone आदि सेट करता है।

इस chapter में आप सीखेंगे:

  • Component Metadata क्या है
  • Common metadata properties
  • Inline vs External template और styles
  • Standalone components
  • Best practices

Component Metadata क्या है

Metadata Angular को component की पहचान और behavior बताती है।

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular Component Metadata Example';
}

Explanation

  • @Component({...}) decorator Angular को बताता है कि यह class component है
  • Metadata define करता है कि selector, template, styles और providers क्या होंगे

Common Metadata Properties

PropertyDescription
selectorComponent का HTML tag (<app-root>). Template में यह use होता है
templateInline HTML template. Small template के लिए use करें
templateUrlExternal HTML file path. Larger templates के लिए
stylesInline CSS styles, array format में
styleUrlsExternal CSS files array
providersComponent-level services, dependency injection
standalonetrue → component independent of NgModule (Angular 14+)

Selector

Selector component को HTML tag की तरह use करने के लिए define होता है:

@Component({
  selector: 'app-hello',
  template: `<h1>Hello Angular!</h1>`
})
export class HelloComponent {}

<app-hello></app-hello>
  • Angular automatically <app-hello> tag replace करता है component template से

Template vs TemplateUrl

Inline Template

@Component({
  selector: 'app-inline',
  template: `<p>This is inline template</p>`
})
export class InlineComponent {}
  • Small components के लिए convenient
  • Quick testing या examples के लिए best

External Template

@Component({
  selector: 'app-external',
  templateUrl: './external.component.html'
})
export class ExternalComponent {}
  • Large templates के लिए recommended
  • HTML और TypeScript clearly separate रहते हैं

Styles vs StyleUrls

Inline Styles

@Component({
  selector: 'app-inline-style',
  template: `<h2>Inline Styled Text</h2>`,
  styles: [`h2 { color: green; font-size: 20px; }`]
})
export class InlineStyleComponent {}

External Styles

@Component({
  selector: 'app-external-style',
  templateUrl: './external-style.component.html',
  styleUrls: ['./external-style.component.css']
})
export class ExternalStyleComponent {}
  • External CSS maintainable और reusable रहती है
  • Component-specific scope automatic रहता है

Providers

Metadata में providers property से component-specific services inject किए जा सकते हैं:

@Component({
  selector: 'app-service',
  template: `<p>{{ data }}</p>`,
  providers: [DataService]
})
export class ServiceComponent {
  data: string;
  constructor(private dataService: DataService) {
    this.data = dataService.getData();
  }
}
  • Service केवल इस component और children में available होगी
  • Root module में service define करने से global availability होती है

Standalone Components

Angular 14+ में standalone components module-independent होते हैं:

@Component({
  selector: 'app-standalone',
  standalone: true,
  imports: [CommonModule],
  template: `<p>Hello Standalone Component!</p>`
})
export class StandaloneComponent {}

Explanation

  • standalone: true → No NgModule required
  • imports → Required modules only
  • Bootstrap with bootstrapApplication(StandaloneComponent)

Best Practices

  • Small components → Inline template और styles use कर सकते हैं
  • Large components → External template और style files
  • Selector lowercase और kebab-case में रखें (app-user)
  • Providers सिर्फ जरूरत के हिसाब से define करें
  • Standalone components new projects में prefer करें

Summary

इस chapter में आपने सीखा:

  • Component Metadata क्या है और क्यों जरूरी है
  • Common properties: selector, template, templateUrl, styles, styleUrls, providers, standalone
  • Inline vs External template और styles
  • Component-specific services (providers)
  • Standalone components concept
  • Best practices
← Angular Components Angular Component Communication →
  • Home