如何在角度绑定样式

Question

i am trying to highlighted selected item from given items using below style but its highlighting all items when i tap on items but i want to highlighted only selected item can some one help me please https://stackblitz.com/edit/angular-7wkrx1?file=src/app/app.component.html

.css

/* Style the tab */
.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 30%;
  height: 300px;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
}

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

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: red;
}

.html

<div class="tab">
  <button class="tablinks" [class.active]="one" (click)="one=!one">London</button>
  <button class="tablinks" [class.active]="two" (click)="two=!two">Paris</button>
  <button class="tablinks" [class.active]="three" (click)="three=!three">Tokyo</button>
</div> 

Answer 1

One solution would be to use one variable to store the selected option:

<div class="tab">
  <button class="tablinks" [class.active]="active == 'one'" (click)="active = 'one'">London</button>
  <button class="tablinks" [class.active]="active == 'two'" (click)="active = 'two'">Paris</button>
  <button class="tablinks" [class.active]="active == 'three'" (click)="active = 'three'">Tokyo</button>
</div> 

Answer 2

Instead, use ngClass , this would be better approach in case of dynamic Class binding.

<div class="tab">
  <button class="tablinks" [ngClass]='{"active": selected == "one"}' (click)="selected = 'one'">London</button>
  <button class="tablinks" [ngClass]='{"active": selected == "two"}' (click)="selected = 'two'">Paris</button>
  <button class="tablinks" [ngClass]='{"active": selected == "three"}' (click)="selected = 'three'">Tokyo</button>
</div> 

Working Example

PS: If you have more options like this, you should go with ngSwitchCase of angular, that could be an efficient one.

Answer 3

Another way, you can do it by typescript logic,

HTML:

<div class="tab">
  <button class="tablinks" [class.active]="one" (click)="function1()">London</button>
  <button class="tablinks" [class.active]="two" (click)="function2()">Paris</button>
  <button class="tablinks" [class.active]="three" (click)="function3()">Tokyo</button>
</div> 

.TS

  function1(){
    this.one=!this.one;
    this.two= this.three = false;
  }

   function2(){
    this.two=!this.two;
    this.one= this.three = false;
  }

   function3(){
    this.three=!this.three;
    this.one = this.two = false;
  }