In my component , i have generated mat-card(which is another component) through *ngFor. There is one button on card on clicking is should style same card elements(which i am able to do.) But if I click the another card button, it should style that one and revert back styles of the previous card to the original style.(Facing issue in this part). Below is the sample code
Parent component html
<div class="ui-lg-3 ui-md-6 ui-g-12" *ngFor="let Obj of fruitList;let i=index;">
<card-view-mini [fruit]="Obj" (selectedFruit)="selectedFruit($event)"></card-view-mini>
</div>
child component html"<div><mat-card>
<span [ngClass]="{'selectedFruit':enableStyle}">{{fruit}}</span>
<button (click)="changeStyle()">
</mat-card></div>"
changeStyle() changeStyle(){
this.enableStyle=true;
}
I assume you have id's for your fruit. If so you can do something like this:
<span [ngClass]="{'selectedCSSClass':fruit.id == selected}">{{fruit}}</span>
<button (click)="selected=fruit.id">
where the first line will check if the selected is equals with the fruit.id and the button will set the selected with the current fruit.id. you don't even need the select function.