Angular Components

Angular application का heart होता है Components। हर Angular app एक या कई components से बना होता है। Component UI और business logic को encapsulate करता है और modular, reusable, maintainable बनाता है।

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

• Angular component क्या है
• Component structure और metadata
• Component communication
• Reusable components बनाना
• Best practices

Angular Component क्या है

Component एक TypeScript class होती है जिसमें Angular @Component decorator use करता है।

• Class में data और methods होते हैं
• Template में UI render होती है
• Styles component-scoped होती हैं

Basic Example

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>{{ title }}</h1>`,
  styles: [`h1 { color: blue; }`]
})
export class AppComponent {
  title = 'Welcome to Angular Components!';
}

Explanation

• @Component decorator component define करता है
• selector HTML tag की तरह use होता है
• template या templateUrl UI define करता है
• styles या styleUrls component-specific CSS apply करता है
• Component class में properties और methods declare होती हैं

Component Files Structure

Angular CLI automatically components generate करता है।

Example: ng generate component hello

hello/
├── hello.component.ts      // Component class
├── hello.component.html    // Template
├── hello.component.css     // Styles
└── hello.component.spec.ts // Unit tests

Explanation

• Component self-contained होती है
• HTML और CSS अलग रहते हैं
• Unit tests automatically create होते हैं

Component Metadata Properties

@Component decorator में commonly use होने वाले properties:

Property	Description
selector	Component का HTML tag
template	Inline HTML template
templateUrl	External HTML template path
styles	Inline CSS styles
styleUrls	External CSS file path
providers	Component-level services
standalone	true → component independent of NgModule (Angular 14+)

Component Communication

Parent → Child (Input)

Child component के data parent से pass होते हैं:

// child.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<p>Message from parent: {{ message }}</p>`
})
export class ChildComponent {
  @Input() message!: string;
}

<!-- parent.component.html -->
<app-child [message]="'Hello from Parent!'"></app-child>

Explanation

• @Input() child component को parent data accept करने देता है
• Parent template में property bind की जाती है

Child → Parent (Output)

Child component parent को events भेज सकता है:

// child.component.ts
import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="notifyParent()">Notify Parent</button>`
})
export class ChildComponent {
  @Output() notify = new EventEmitter<string>();

  notifyParent() {
    this.notify.emit('Hello Parent!');
  }
}

<!-- parent.component.html -->
<app-child (notify)="onNotify($event)"></app-child>

onNotify(message: string) {
  alert(message);
}

Explanation

• @Output() parent को event emit करता है
• (notify) parent template में capture करता है
• $event child से data receive करता है

Reusable Components

• Components modular design के लिए होते हैं
• Small, focused और reusable components बनाएं
• Feature-based folder structure maintain करें

Lifecycle Hooks (Intro)

हर component के lifecycle के दौरान Angular कुछ methods call करता है।

• ngOnInit() – Component initialize होने पर
• ngOnChanges() – Input properties change होने पर
• ngOnDestroy() – Component destroy होने पर

Detailed lifecycle chapter में सीखेंगे।

Component Best Practices

• Each component single responsibility के लिए होना चाहिए
• Template और logic clearly separate करें
• Reusable components को standalone या feature module में रखें
• Inputs और Outputs से communication करें
• Avoid heavy computation inside template

Summary

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

• Angular component basics
• Component class, template, styles
• Metadata properties
• Parent ↔ Child communication (@Input, @Output)
• Reusable component design
• Lifecycle hooks intro