CODEWITHSUNDEEP
angular
Archana R
Archana R

Reputation: 51

change the colour of icon after click

How to change the colour of icon after click? in angular 4 with bootstrap I am using icon in panel with *ngfor loop it is changing in all the panel after click but it wants to change in only in one panel.

app.component.html                                 

<div *ngFor="let x of httpdata; let i = index; ">
  <div class="panel">
     <div class="panel-body">
        <img src="{{x.product_image}}" height="300px" width="200px"> {{x.product_name}}<br/>
         <mat-icon (click)="addEvent(x.product_id)" id="fav{{x.product_id}}" [ngStyle]="{ 'color':iconColor}">favorite_border</mat-icon>
      </div>
  </div>
</div>


app.component.ts
export class AppComponent implements OnInit {
iconColor: string = "#000";
constructor(private dataservice:DataserviceService,private global: AppGlobals) {}
httpdata;
ngOnInit() {
this.dataservice.getApparel(this.global.AppUrl +'getRecommendations?client=web&call_tag=stylemachine&size=15&position=0&attempt=0&user=5724&project=2226&collection=200&category=16&client-tag=women_apparels').subscribe(data=>this.httpdata=data);
}
addEvent(x.product_id){
  this.iconColor = 'green';
   console.log(x);
 }
}

Upvotes: 0

Views: 1143

Answers (1)

Archana R
Archana R

Reputation: 51

app.component.html
enter code here
<div *ngFor="let x of httpdata; let i = index; ">
<div class="panel">
 <div class="panel-body">
    <img src="{{x.product_image}}" height="300px" width="200px"> {{x.product_name}}<br/>
     <mat-icon (click)="addEvent(x)" id="fav{{x.product_id}}" [ngStyle]="{'color':x.select ?  '#d63872' : '#000'}">favorite_border</mat-icon>
  </div>
</div>
</div>



app.component.ts

export class AppComponent implements OnInit {
constructor(private dataservice:DataserviceService,private global: AppGlobals) {}
httpdata;
ngOnInit() {
this.dataservice.getApparel(this.global.AppUrl +'getRecommendations?client=web&call_tag=stylemachine&size=15&position=0&attempt=0&user=5724&project=2226&collection=200&category=16&client-tag=women_apparels').subscribe(data=>this.httpdata=data);
}
addEvent(x){
x.select = !x.select;
console.log(x);
}
}

Upvotes: 1

Related Questions