Joe Joe - 1 year ago 62
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 class="list-bg" *ngFor="#item of items>
<div>id: {hetId(item)}}</div>
<div>name: {{getName(item)}}</div>



Answer Source

Add class bindings to your buttons.

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download