Angular 6: изменить цвет фона div в соответствии с активной вкладкой

Question

Я хочу изменить цвет фона класса tabswitch на основе tab1 и tab2 active. Я делаю этот код на Angular 6.

<div class="tabswitch">
  <input type="radio" id="tab1" name="tabs" checked>
  <label for="tab1">tab1</label>
  <input type="radio" id="tab2" name="tabs">
  <label for="tab2">tab2</label>
  <div id="content1">b</div>
  <div id="content2">a</div>
</div>

Answer 1

Чтобы использовать мою логику, вы должны объявить переменную с именем activeTab в своем компоненте и оставить имя активированной вкладки внутри этой переменной, а затем вы можете использовать директиву [ngStyle] для достижения этой цели,

<div class="tabswitch" [ngStyle]="{'background-color': activeTab === 'tab1' ? 'green' : 'red' }">
  <input type="radio" id="tab1" name="tabs" checked>
  <label for="tab1">tab1</label>
  <input type="radio" id="tab2" name="tabs">
  <label for="tab2">tab2</label>
  <div id="content1">b</div>
  <div id="content2">a</div>
</div>

Больше примеров здесь .

Answer 2

<div class="tabswitch" ng-class="active">
<input type="radio" id="tab1" name="tabs" ng-click="active='tab1c'" checked>
<label for="tab1">tab1</label>
<input type="radio" id="tab2" name="tabs" ng-click="active='tab2c'">
<label for="tab2">tab2</label>
<div id="content1">b</div>
<div id="content2">a</div>
</div>

сделать css для класса tab1c и tab2c