Add CSS based on Button Activated Ionic/Angular 8

Question

I have buttons which are dynamically generated. On click of any one of the buttons, I want the css of the button to be changed, based on which button is activated.

My code:

HTML:

 <div class="container">
<div class="scroll" scrollX="true">
  <span *ngFor="let item of buttons; let i = index" (click)="genreSelect(item)"
    ><ion-button shape="round" [ngClass]="{activated: buttonActive}">{{item.catName}}</ion-button></span
  >
</div>

TS:

this.buttons = [{
      id: 1,
      catName:'Electronics'
    },{
      id: 2,
      catName:'Books'
    },{
      id: 3,
      catName:'Furniture'
    },{
      id: 4,
      catName:'Laptops'
    }];




genreSelect(item){
    console.log(item);
    
    this.buttonActive = true;
  }

CSS:

.activated:active{
    background-color: red;
  }

The CSS flashes for a second and then goes away.

How can I make the CSS be there if the button is activated.

The :active pseudo class is only applied while the button is pressed. You want to use .activated, .activated:hover, .activated:active { background-color: red; } if you want the background to be red for all button states. — D M
– D M, Commented Jan 4, 2022 at 15:18
With this css of all the buttons get changed. I want only the selected button's css to change — Anamik Adhikary
– Anamik Adhikary, Commented Jan 4, 2022 at 15:22
Yes, you have all buttons' ngClass bound to the same variable (buttonActive). You need more than one variable. — D M
– D M, Commented Jan 4, 2022 at 15:23
Since you have buttons as object, you can add key 'active' as boolean and pass bttn id through click event to method which will change 'active' to false on all bttns and set it to true for the clicked bttn, then have ngClass on button return one css in case the button.active and the other css if !button.active — Misha Mashina
– Misha Mashina, Commented Jan 4, 2022 at 16:17
as @MishaMashina said either take a boolean in your JSON objects or you can use Index as selected button to add your css. — Najam Us Saqib
– Najam Us Saqib, Commented Jan 4, 2022 at 18:36

Najam Us Saqib · Accepted Answer · 2022-01-05 07:41:33Z

3

you can use Index as your selected button:

<div class="container">
   <div class="scroll" scrollX="true">
      <span *ngFor="let item of buttons; let i = index (click)="genreSelect(item, i)">
         <ion-button shape="round" [ngClass]="activeIndex == i ? 'buttonActive': ''"> 
            {{item.catName}}
         </ion-button>
      </span>
   </div>
</div>

.ts:

activeIndex = null;

genreSelect(item, index){
   this.activeIndex = index;
}

edited Jan 5, 2022 at 7:41

answered Jan 4, 2022 at 18:42

Najam Us Saqib

3,4411 gold badge29 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anamik Adhikary Over a year ago

this works with some small changes in the ngclass [ngClass]="activeIndex === i ? 'buttonActive': ''" The bracket needs to be removed. Else it gives syntax error for me.

Collectives™ on Stack Overflow

Add CSS based on Button Activated Ionic/Angular 8

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related