Как применить CSS к кнопке динамически в Angular 7

Question

Я очень плохо знаком с Angular.

Я хочу динамически применять CSS (активный класс) к кнопке, когда она нажата, а кнопка не активна, и необходимо удалить активный класс для кнопки.

HTML код

<div class="tab">
  <button (click)="onTabClick('0')">Sports</button>
  <button (click)="onTabClick('1')">News</button>
  <button (click)="onTabClick('2')">Movies</button>
</div>
<div>
  <app-sports  *ngIf="tabIndex == 0"></app-sports>
  <app-movies  *ngIf="tabIndex == 2"></app-movies>
</div>

TS файл

tabIndex = 2;

onTabClick(index){
        this.tabIndex = index;
   }

CSS

    /* Style the buttons that are used to open the tab content */
 .tab button {
   background-color: inherit;
   float: left;
   border: none;
   outline: none;
   cursor: pointer;
   padding: 14px 16px;
   transition: 0.3s;
 }

 /* Change background color of buttons on hover */
 .tab button:hover {
   background-color: #ddd;
 }

 /* Create an active/current tablink class */
 .tab button.active {
   background-color: #ccc;
 }

Answer 1

Вы можете использовать ngClass Example [ngClass] = "{'show': tabIndex === 2}"

Здесь реализован код для приведенного выше сценария

HTML-код

<div class="tab">
    <button [ngClass]="{'active': tabIndex === 0}" (click)="onTabClick(0)">Transmit</button>
    <button [ngClass]="{'active': tabIndex === 1}" (click)="onTabClick(1)">Published</button>
    <button [ngClass]="{'active': tabIndex === 2}" (click)="onTabClick(2)">Bulk Transmit</button>
</div>

ФАЙЛ ТС

tabIndex = 0;
onTabClick(index){
    this.tabIndex = index;
}

ФАЙЛ CSS

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

.tab button:hover {
    background-color: #ddd;
}

.tab button.active {
    background-color: #ccc;
}

Answer 2

Вы должны создать переменную bool для переключения

// public clicked = false;

<a (click)="clicked ? clicked = false : clicked = true;" [class.active]="clicked">organize</a>
// or shorter
<a (click)="clicked = !clicked" [class.active]="clicked">anchor text</a>

Единственный способ HTML

<li *ngFor="let n of list" [class.active]="clicked === n" 
     (click)="clicked = n">
   <a>{{n}}</a>
</li>

Другой способ для динамических версий:

// component
toggleReply: any = {};

// view
<a (click)='toggleReply[i] = !toggleReply[i]'>
    <ng-container *ngIf="!toggleReply[i]">reply</ng-container>
    <ng-container *ngIf="toggleReply[i]">close</ng-container>
</a>