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?

Community · Accepted Answer · 2017-05-23 12:09:51Z

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, 2017 at 12:09

CommunityBot

11 silver badge

answered Feb 2, 2017 at 9:35

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Günter Zöchbauer Over a year ago

@micronyks if you remove {{}} you need to add at least []. When link.url returns a string (not an array) then {{}} is fine as well.

Konstantinos Papakonstantinou Over a year ago

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?

Günter Zöchbauer Over a year ago

I see. In this case you can't use first. I updated my answer.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related