On specific button click add a class in ionic 3

Question

I have a situation where i have multiple records and i used in that *ngFor loop , so per record there is one button And I am trying to do is onclick change background of button so that it looks alike it is clicked

<div class="main" *ngFor="let data of fetched_info; let i=index">
    <ion-grid no-padding no-margin>
        <ion-row no-padding no-margin class="row">
            <ion-col col-4 no-padding no-margin> 
                <button ion-button small icon-start color="secondary"
outline (click)="shortlist($event,data[i].username)" class="">
                    <ion-icon ios="ios-star-outline" md="md-star-outline"></ion-icon>
                    Shortlist
                </button>
            </ion-col>

        </ion-row>
    </ion-grid>
</div>

onclick of shortlist() function i want to make it happen

Shurvir Mori · Accepted Answer · 2023-04-07 12:11:53Z

2

you can try like this

HTML

<div class="main" *ngFor="let data of fetched_info; let i=index">
 <ion-grid no-padding no-margin>
     <ion-row no-padding no-margin [ngClass]="backgroundColorFlag[i] == true ? 'backgroundColorClass' : 'backgroundColorNormalClass' " class="row">
       <ion-col col-4 no-padding no-margin> 
         <button ion-button small icon-start color="secondary"
           outline (click)="shortlist($event,data[i].username, i)" class="">
           <ion-icon ios="ios-star-outline" md="md-star-outline"></ion-icon>
            Shortlist
         </button>
       </ion-col>
     </ion-row>
 </ion-grid>
</div>

TS

    backgroundColorFlag: any[] = [];
    shortlist(data, i) {
      this.backgroundColorFlag[i] != this.backgroundColorFlag;
    }
    functionWhichHavefetched_info() {
     for (let i = 0; i < fetched_info.length; i++) {
           this.backgroundColorFlag[i] = false // default we are setting value false and on click we set this flag value true
      }
    }

you need to create a class like this backgroundColorClass and backgroundColorNormalClass and add or remove class by using a flag backgroundColorFlag i hope it helps you out

edited Apr 7, 2023 at 12:11

Shurvir Mori

2,4271 gold badge20 silver badges30 bronze badges

answered Mar 21, 2019 at 11:14

Yash Rami

2,3371 gold badge12 silver badges16 bronze badges

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

5 Comments

DEEPAK Over a year ago

No it is not helping .. in case i have 10 button so it will apply on all buttons i want to be applied it on only one button which is clicked

Yash Rami Over a year ago

Hey I just edit the answer I create one Array of the flag and that array has the same length as fetched_info array have please check my updated answer

DEEPAK Over a year ago

i was about to do the same and here you mentioned it ...well let me try this one

Yash Rami Over a year ago

yeahhh sure :) let me know it is working or not :) if it is please accept my answer

DEEPAK Over a year ago

yes its working . just one edit this.backgroundColorFlag[i] != this.backgroundColorFlag;

Collectives™ on Stack Overflow

On specific button click add a class in ionic 3

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related