I have a button which is inside an ngFor loop. I am styling it like this.
<div *ngFor="let component of componentList;let index =index">
<button type="button" id='Button{{index}}' name='Button{{index}}' class="device_name_button" [ngClass]="{'greencolorstyle':component.status=='Available', 'redcolorstyle': component.status=='Faulted', 'graycolorstyle':component.status=='Unavailable','myClass':isClicked==true}" (click)="selectComponent($event,component.components);" > {{component.name}} </button>
</div>
I am setting isClicked = true with click event handler.
My problem is that when I see the style being applied on the button, after a click, I see, 'device_name_button greencolorstyle myClass'. Whereas on click it should only have 'device_name_button' and 'myClass'.
How do I remove the other classes from this button when someone clicks on this button?
I solved it using two step process. First I created a custom-component named "custom-button". I replaced the button element in the Html with custom element. In this way I had a handle on each item of the array. Then I created three more styles namely "graywhitecolorstyle","greenwhitecolorstyle" & "redwhitecolorstyle", over and above the three already mentioned.
Next the html of custom-button component.
<div class="device_name_button" matTooltipPosition="right"
[ngClass]="{'whiteredbackground':hardwareComponent.isClicked &&
hardwareComponent.status=='Faulted'
,'greencolorstyle':hardwareComponent.status=='Available' &&
hardwareComponent.isClicked==false,'greenwhitecolorstyle':
hardwareComponent.status=='Available' && hardwareComponent.isClicked,
'redcolorstyle': hardwareComponent.status=='Faulted' &&
!hardwareComponent.isClicked,
'graycolorstyle':hardwareComponent.status=='Unavailable' &&
!hardwareComponent.isClicked,'graywhitecolorstyle':
hardwareComponent.status=='Unavailable' && hardwareComponent.isClicked}"
(click)="selectHardware()" ><p>{{title}}</p>
</div>