color element in a list onclick angular
<ul class="horizontal" id="nav">
<li
*ngFor="let state of states"
(click)="setStateAsActive(state)">
<a [class.active]="state === activeState">
{{ state }}
</a>
</li>
</ul>
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
activeState = 'Draft';
states = [
'Draft',
'Planned',
'Started',
'Suspended',
'Ended',
]
setStateAsActive(state) {
this.activeState = state;
}
}