Динамические кнопки Angular2, где можно выбрать только одну

Question

Я пытаюсь создать следующие кнопки UI/UX:
.. [2015] [2016] [2017]

Там, где текущий год (во время написания, 2017) по умолчанию "выбран", однако, когда пользователь нажимает "2015", следует отменить выбор "2017" и "2016" (эти кнопки являются "взаимоисключающими")

Кнопки генерируются из внешнего источника данных, который предоставляет мне данные с годами:

<button *ngFor="let year of styles.years"  type="button" name="button" class="btn btn-default" id="{{year.year}}">
  {{year.year}}
</button>

Как я могу создать систему кнопок, в которой одна кнопка выбирается автоматически, а когда выбрана другая кнопка, она отменяет выбор активно выбранной кнопки и устанавливает для выбранной кнопки значение "выбранная"?

Answer 1

Установить свойство в компоненте activeYear и контролировать его, связывая логику с (click) кнопки

<button *ngFor="let year of styles.years"  
    [ngClass]="{ active: activeYear === year }"
    (click)="activeYear = year.year"
    type="button" name="button" class="btn btn-default"  id="{{year.year}}">
    {{year.year}}
</button>

Вот работающий Плункер, демонстрирующий это

Answer 2

Для тех, кто хотел бы использовать несколько классов, как в моем случае: добавьте запятую и добавьте новый стиль: условие.

[ngClass]="{ selected: activeYear === year.year, 'btn-default': activeYear !== year.year}"

Надеюсь, что это помогает другим