Q:

EventEmmiter в Angular 5

Есть компонент, необходимый для добавления жанров произведения. Его код:
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormArray, FormControl } from '@angular/forms';
import { GENRES } from '../mock-genres';

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'genre',
  template: `
    <label for="genres">Жанр(ы)</label>
    <select class="form-control" name="genres" (change)="addGenre(genre)" #genre>
      <option *ngFor="let genre of genresList">{{ genre }}</option>
    </select>
    <ul id="genres-list" class="list-group">
      <li
        class="list-group-item genre"
        *ngFor="let genre of genres"
        (click)="removeGenre(genreItem.innerText)"
        #genreItem>
        {{ genre }}
      </li>
    </ul>
  `,
  styleUrls: ['./genre.component.scss']
})
export class GenreComponent implements OnInit {

  genres: String[] = [];
  @Input('type') type: String;
  @Output('change') change = new EventEmitter<String[]>();
  public genresList: String[];

  ngOnInit() {
    switch (this.type) {
      case 'films':
        this.genresList = GENRES.filmGenres;
        break;
      case 'books':
        this.genresList = GENRES.bookGenres;
        break;
      case 'music':
        this.genresList = GENRES.musicGenres;
        break;
    }
  }

  addGenre(genre: HTMLInputElement) {
    if (genre.value !== '') {
      this.genres.push(genre.value);
      this.change.emit(this.genres);
    }
  }

  removeGenre(genre) {
    for (let i = 0; i < this.genres.length; i++) {
      if (this.genres[i] === genre) {
        this.genres.splice(i, 1);
        this.change.emit(this.genres);
        return;
      }
    }
  }

}

Вызов во внешнем компоненте выглядит как
<genre (change)="genresValues = $event" [type]="'books'"></genre>

Но вот странная вещь: при удалении жанра всё работает нормально, однако при добавлении, помимо новых значений жанров, он возвращает объект события.

Подскажите, как избавиться от этого нежелательного поведения, пожалуйста

A:

Интересный эффект.
Внешний компонент подписывается на событие change, которое отдаст компонент GenreComponent.
Однако, некоторые события "всплывают" и происходит следующее: 

событие change, которое бросает сам компонент: this.change.emit(this.genres);
событие change, которое всплывает от селекта.

Для решения можно либо изменить имя события, которое бросает компонент: https://stackblitz.com/edit/angular-z2jf1r
Либо вызвать .stopPropagation в обработчике события селекта: https://stackblitz.com/edit/angular-c1ae5f
Например: 
<select class="form-control" name="genres" (change)="addGenre(genre);$event.stopPropagation();" #genre>

