Joe Joe - 3 months ago 9
CSS Question

how to color button and keep state?

I have 3 buttons and a each button presenting a different list. Only one list can be presented at a time, and I want the button to be colored when it's list presented....

currently I have managed to highlight the button with css using:

button:active {
border: 2px solid green;
}


in my css file but when I click somewhere else in the page the highlighting is gone, I want something to color the button as long its list is presented.

this is my buttons:

<button md-button (click)="setListToDisplay(0)" class="md-primary">List1</button>

<button md-button (click)="setListToDisplay(1)" class="md-primary">List2</button>
</div>

<md-content>

<div class="list-bg" *ngFor="#item of items>
<div>id: {hetId(item)}}</div>
<br>
<div>name: {{getName(item)}}</div>
</div>
</div>

</md-content>


Thanks!

Answer

Add class bindings to your buttons.

For example: [class.yourClass]="selectedGroupNumber == 0" will add class yourClass to the button element whenever selectedGroupNumber equals 0.

Comments