1<ul class="horizontal" id="nav">
2 <li
3 *ngFor="let state of states"
4 (click)="setStateAsActive(state)">
5 <a [class.active]="state === activeState">
6 {{ state }}
7 </a>
8 </li>
9</ul>
10
11import { Component } from '@angular/core';
12
13@Component({
14 selector: 'my-app',
15 templateUrl: './app.component.html',
16 styleUrls: [ './app.component.css' ]
17})
18export class AppComponent {
19 activeState = 'Draft';
20
21 states = [
22 'Draft',
23 'Planned',
24 'Started',
25 'Suspended',
26 'Ended',
27 ]
28
29 setStateAsActive(state) {
30 this.activeState = state;
31 }
32
33}