Два компонента запускают одно и то же событие

Question

У меня есть простой компонент с переключателями:

Html:

<div class="rate">
  <input type="radio" id="star5" name="rate" value="5" (change)="onRateChange($event.target.value)"/>
  <label for="star5" title="text">5 stars</label>
...
</div>

Ts:

@Output() rateSelected = new EventEmitter<number>();

public onRateChange(value: number) {
    this.rateSelected.emit(value);
  }

И когда я использую его как:

Html:

<form>
  <h1>Rate one:</h1>
  <app-stars (rateSelected)="onRateOneSelected($event)"></app-stars>

  <h1>Rate two:</h1>
  <app-stars (rateSelected)="onRateTwoSelected($event)"></app-stars>
</form>

Ts:

  onRateOneSelected(rate: number) {
    alert('app ' + rate); // this one is always triggered
  }

  onRateTwoSelected(rate: number) {
    alert('comfort ' + rate);
  }

Независимо от того, использую ли я первый или второй рейтинг, всегда запускается событие onRateOneSelected. Что случилось? Как я могу это исправить?