title: How to bind style in angular
body: <p>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
  <a href="https://stackblitz.com/edit/angular-7wkrx1?file=src/app/app.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-7wkrx1?file=src/app/app.component.html</a></p>
  
  <h2>.css</h2>
  
  <pre><code>/* 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;
  }
  </code></pre>
  
  <h2>.html</h2>
  
  <pre><code>&lt;div class="tab"&gt;
    &lt;button class="tablinks" [class.active]="one" (click)="one=!one"&gt;London&lt;/button&gt;
    &lt;button class="tablinks" [class.active]="two" (click)="two=!two"&gt;Paris&lt;/button&gt;
    &lt;button class="tablinks" [class.active]="three" (click)="three=!three"&gt;Tokyo&lt;/button&gt;
  &lt;/div&gt; 
  </code></pre>