title: How do I change the style of a single button inside a *ngFor in Ionic 3?
body: <p>I am trying to change the style of the specific button I click in the *ngFor in the ion-col. Currently when I click on a button, the styles for all buttons changes at the same time.</p>
  
  <p>Here are my codes:</p>
  
  <pre><code>&lt;ion-col *ngFor="let item of displayRestaurant[0].seatTimeSlotAndDiscount | slice:indexStart:indexEnd; let i=index" no-padding&gt;
    &lt;button ion-button style="border-radius:100px;height:70px;width:70px;text-align:center;" (click)="clickedDiscount(item)"  [ngClass]="clickedDiscountBoolean ? 'discountClicked' : 'discountUnclicked'"&gt;
      &lt;p style="font-size: 10px; color:white;"&gt;{{item.percentageDiscount}}&lt;/p&gt;
      &lt;p style="font-size:10px;color:white;"&gt;{{item.timeOfDiscount}}&lt;/p&gt;
    &lt;/button&gt;
  &lt;/ion-col&gt;
  
  </code></pre>
  
  <p>SCSS:</p>
  
  <pre><code>.discountClicked{
      border: 3px solid orange;
  }
  
  .discountUnclicked{
      border:none;
  }
  </code></pre>
  
  <p>.ts:</p>
  
  <pre><code>clickedDiscount(discount:Discount){
    this.clickedDiscountBoolean = !this.clickedDiscountBoolean;
  }
  </code></pre>
  
  <p>Originally it is like this:
  <a href="https://i.stack.imgur.com/nWZUM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nWZUM.png" alt="enter image description here"></a></p>
  
  <p>Here is what my current codes do after I clicked on any of the buttons (The new style is applied to all):
  <a href="https://i.stack.imgur.com/kDvHF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kDvHF.png" alt="enter image description here"></a></p>
  
  <p>What I am looking for is, when I click on any of the buttons, only that button's style will change, and the rest will not.</p>