CODEWITHSUNDEEP
cssangulartypescriptbutton
Pat8
Pat8

Reputation: 1036

How to add a css class on click to only the buttons that are clicked

I was wondering how to add a css class to only one button when clicked using Angular. Right now when I click any of the buttons the class gets added to all of the buttons.

I want to add the css class to each button that is clicked.

I could do this by making several different css classes for each button and then when a button is clicked it only adds that specific class for that button, but is there a better way to do this?

Any help would be appreciated, Thanks.

//btns.component.html

 <div class="btn-container">
    <div class="btn-col1">
      <button class="stepOne-btns" (click)="wasClicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"><img
          src="../../assets/images/button-icons/home-icon.png" alt=""><strong>Home</strong></button>
      <button class="stepOne-btns" (click)="wasClicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"><img
          src="../../assets/images/button-icons/life-icon.png" alt=""><strong>Life</strong></button>
      <button class="stepOne-btns" (click)="wasClicked()"[ngClass]="btnStatus ? 'active' : 'inactive'"><img src="../../assets/images/button-icons/car-icon.png"
          alt=""><strong>Auto</strong></button>
    </div>
    <div class="btn-col2">
      <button class="stepOne-btns" (click)="wasClicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"><img
          src="../../assets/images/button-icons/condo-icon.png" alt=""><strong>Condo</strong></button>
      <button class="stepOne-btns" (click)="wasClicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"><img
          src="../../assets/images/button-icons/flood-icon.png" alt=""><strong>Flood</strong></button>
      <button class="stepOne-btns" (click)="wasClicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"><img
          src="../../assets/images/button-icons/umbrella-icon.png" alt=""><strong>Umbrella</strong></button>
    </div>
  </div>

//btns.component.ts

  btnStatus: boolean = false;

  wasClicked() {
    this.btnStatus = !this.btnStatus;
    console.log(this.btnStatus);
  }

//btns.component.css

  .active {
    border: 4px solid $primary-color;
  }

  .inactive{
    border: none;
  }

Upvotes: 0

Views: 1064

Answers (2)

Arrow
Arrow

Reputation: 113

let's say you want 3 button on app.component.html and want to change button css when clicked on any one.

app.component.html

<app-btn [url]="item.url" *ngFor="let item in [{url:'assets/images/button-icons/home-icon.png'},{url:'/assets/images/button-icons/life-icon.png'},{url:'assets/images/button-icons/car-icon.png'}]"></app-btn>

[1,2,3] is for 3 button can be any length as per requirement (wrote this was to simplify things). you can pass your URL as input as shown above

create a new component say btn

btn.component.html

<button [src]="url" (click)="clicked()" [ngClass]="btnStatus ? 'active' : 'inactive'"></button>

btn.component.ts

@Input() url; 
clicked() {
          this.btnStatus = this.!btnStatus
      }

Hope this was helpful their might be few minor syntax mistakes.

Upvotes: 0

cabesuon
cabesuon

Reputation: 5270

I think your problem is that you are using one property, btnStatus, for all the buttons, that is why your are having that issue. You need a value for each button. You could do something like this.

btns.component.ts

const btnPropsCol1 = [
    { status: false, src: '../../assets/images/button-icons/home-icon.png', label: 'Home'},
    { status: false, src: '../../assets/images/button-icons/life-icon.png', label: 'Life'},
    { status: false, src: '../../assets/images/button-icons/car-icon.png', label: 'Auto'}
]

wasClicked(i: number) {
    this.btnProps[i].status = !this.btnProps[i].status;
    console.log(this.btnProps[i].status);
}

btns.component.html

<div class="btn-col1">
    <button *ngFor="let btn of btnPropsCol1; index as i;"
        class="stepOne-btns"
        (click)="wasClicked(i)"
        [ngClass]="btn.status ? 'active' : 'inactive'">
        <img src="btn.src" alt=""><strong>{{btn.label}}</strong>
    </button>
</div>

I did it just for col1, you should repeated for the other col.

Upvotes: 1

Related Questions