My question may not be perfectly described by the title, but here it is.
In my Angular Material2 project, I have an md-toolbar where I am dynamically looping through values:
<md-toolbar (click)="selectedToolbarValue(key.Name)" *ngFor="let key of arrayOfKeys; let i=index">
<span>{{key.Name}}</span>
</md-toolbar>
Now, I want to change the background color of a clicked toolbar using [ngClass]. Here's what I've tried:
<md-toolbar [ngClass]="{'toolBarColor':setToolbarStyle}" (click)="selectedToolbarValue(key.Name)" *ngFor="let key of arrayOfKeys; let i=index">
<span>{{key.Name}}</span>
</md-toolbar>
In my component file:
setToolbarStyle:boolean=false;
selectedToolbarValue(value){
this.setToolbarStyle = true;
//other code
}
In my stylesheet:
.toolBarColor{
background-color:blue;
color:#fff;
}
The issue I'm facing is that the above code applies styles to all the toolbar values in the loop. How can I style only the toolbar that is being clicked?