@Input() और @Output()

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

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

@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() तय करता है कि मान हमेशा दिया जाए।

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 को इवेंट की तरह सुनता है, ठीक किसी नेटिव एलिमेंट की तरह।

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

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

• input()
• input.required()
• output()