How to display information from one select by selecting an option from another?

Question

Angular

There are two "selects", one showing the years and the other showing the holidays. This is what the models look like:
holiday.model:

export class Holiday{
    constructor(
...
        public date?: Date,
        public name?: string,
...
    ) { }
}

year.model:

export class Year{
    constructor(
        public years?:number
    ) { }
}

I need to make it so that by selecting a year in another "select" all the holidays associated with this year are displayed. Here's my non-working version. What needs to be corrected here to make it work?

<label>Года</label>
<label for="favcity">
  <select id="favcity" name="select"  >
    <option *ngFor="let year of years" [value]="year.years" (click)="onYearSelection(year.years)">
      {{year.years | int}}
    </option>
  </select>
</label>

<label>Праздники</label>
  <label for="favcity">
    <select id="favcity" name="select"  >
      <option *ngFor="let holiday of filteredholidays" [value]="holiday.name">
        {{holiday.name}}
       </option>
    </select>
</label>

onYearSelection(year){
    this.filteredholidays = []
    this.filteredholidays = this.holidays.filter(holiday => holiday.date.getFullYear() == year);
  }

Answer 1

https://www.npmjs.com/package/angular-4-dropdown-m...