CODEWITHSUNDEEP
angular
User123
User123

Reputation: 461

ngFor change the bgcolor of the item that i click in angular 2

I want to change background color of the button that i click, below is my code, But, it is not running as i expected,instead it is changing all the row buttons. Any help?

<tr *ngFor="let stageitem of stageListData">
        <td>{{stageitem.srcScriptInstanceName}}</td>
        <td>{{stageitem.startTime}}</td>
        <td>{{stageitem.endTime}}</td>
        <td>Manual</td>
        <td>{{stageitem.state}}</td>
        <td><button class="erroDisplayBtn" [ngStyle]="{'background-color':btnColor}" (click)="errorStepMenuOpen($event, stageitem)">{{stageitem.error}}</button></td>
</tr>

Angular 2 script

 errorStepMenuOpen() {
    this.errorStepMenu = true;
    this.btnColor = "#ff7300";
 }

Upvotes: 0

Views: 1605

Answers (2)

Gel
Gel

Reputation: 3026

I stumbled upon your question as I was going through the same challenge but in my case Im trying to change the color of an svg icon after I click its table-row where it lives. Here is how I solved mine. 

 <tr *ngFor="let item of someList; let i = index" (click)="changeColor(i, item)">
                                    
        <span [style.background-color]="item.name !== selectedName ? 'red' : 'blue'">
            <i-check-square>
        </span>
</tr>

Then on my ts file: 

 selectedName:any;

 ngOnInit() {
        this.selectedName = null;
    }
changColor(i, item) {
        if ((this.selectedName = item.supplierName)) {
            return true;
        }
    }

Upvotes: 1

Chau Tran
Chau Tran

Reputation: 5088

Quick workaround is instead of having a single btnColor, you can have a btnColors array.

On stageListData populated, you can loop through stageListData then for each stageItem, push a default color to btnColors.

In your template, make follow changes:

<tr *ngFor="let stageitem of stageListData; let i = index;">
     <td>{{stageitem.srcScriptInstanceName}}</td>
     <td>{{stageitem.startTime}}</td>
     <td>{{stageitem.endTime}}</td>
     <td>Manual</td>
     <td>{{stageitem.state}}</td>
     <td><button class="erroDisplayBtn" [ngStyle]="{'background-color':btnColor[i]}" (click)="errorStepMenuOpen($event, stageitem, i)">{{stageitem.error}}</button></td>
</tr>

In your ts:

errorStepMenuOpen(event, stageItem, index) {
    this.errorStepMenu = true;
    this.btnColors[index] = "#ff7300";
}

Upvotes: 0

Related Questions