# @Input() और @Output() — एंगुलर

Source: https://www.geekswithgeeks.com/hi/angular/ng-input-output

> डेटा को चाइल्ड तक भेजें और इवेंट को वापस पैरेंट तक।

## डेकोरेटर शैली

`@Input()` पैरेंट टेम्पलेट से मान प्राप्त करता है; `@Output()` के साथ `EventEmitter` इवेंट को ऊपर भेजता है।

```typescript
@Component({ selector: 'app-star-rating', standalone: true, template: `...` })
export class StarRatingComponent {
  @Input() rating = 0;
  @Output() ratingChange = new EventEmitter<number>();

  select(value: number) {
    this.ratingChange.emit(value);
  }
}
```

## सिग्नल-आधारित input()/output()

नए Angular में `input()` और `output()` फ़ंक्शन मिलते हैं — सिग्नल-अनुकूल, और `input.required()` तय करता है कि मान हमेशा दिया जाए।

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

@Component({ selector: 'app-star-rating', standalone: true, template: `...` })
export class StarRatingComponent {
  rating = input.required<number>();
  ratingChange = output<number>();

  select(value: number) {
    this.ratingChange.emit(value);
  }
}
```

## पैरेंट से उपयोग

पैरेंट input को प्रॉपर्टी की तरह बाइंड करता है और output को इवेंट की तरह सुनता है, ठीक किसी नेटिव एलिमेंट की तरह।

```html
<app-star-rating [rating]="product.rating" (ratingChange)="onRate($event)" />
```

**Quiz:** कौन-सा फ़ंक्शन तय करता है कि पैरेंट को हमेशा मान देना ही होगा?

- [ ] input()
- [x] input.required()
- [ ] output()

*Answer:* input.required(). `input.required()` कंपाइलर को यह सुनिश्चित करने पर मजबूर करता है कि पैरेंट हमेशा मान बाइंड करे।