Angular 2 - set attribute of list item according to component variable

Question

I have a list of items and when the page loads I want the first item to look active.

<li *ngFor="let link of links; let i = index;" (click)="setActive(i)" class="{i === activeIndex ? 'active' : ''}">
    <a routerLink="{{link.url}}">{{link.text}}</a>
</li>

and the class looks like this

export class NavbarComponent{
    private links: Array<Object>;
    private activeIndex: number = 0;

    constructor(private linksService: LinksService) {
        this.links = linksService.getNavLinks();
    }

    setActive(index: number) {
        this.activeIndex = index;
    }
}

The list item becomes active correctly on clicking it. But not when the page loads. What mistake am I making?

score 2 · Accepted Answer · edited May 23 '17 at 12:09

2

You can use the first variable provided by ngFor and use [class.xxx]="..." binding to set/remove a class:

<li *ngFor="let link of links; let i = index" 
     [class.active]="activeIndex == i" 
     (click)="setActive(i)">
    <a routerLink="{{link.url}}">{{link.text}}</a>
</li>

See also Implementing ngClassEven ngClassOdd for angular 2

edited May 23 '17 at 12:09

Community

1
1

answered Feb 02 '17 at 09:35

Günter Zöchbauer

623,577
216
2,003
1,567

1

@micronyks if you remove `{{}}` you need to add at least `[]`. When `link.url` returns a string (not an array) then `{{}}` is fine as well. – Günter Zöchbauer Feb 02 '17 at 09:44
Thanks, it works, but now it messes up my setActive function and it stays always active. Can you please guide me on changing this function? – Konstantinos Papakonstantinou Feb 02 '17 at 09:45
I see. In this case you can't use `first`. I updated my answer. – Günter Zöchbauer Feb 02 '17 at 09:46

Angular 2 - set attribute of list item according to component variable

1 Answers1