Angular2 - Adding CSS class to selected element

Question

I have the following code in my .html:

<ul id="navbar-example" class="nav nav-pills nav-stacked" *ngFor="let object of objects; let i = index;">
    <li class="nav-item" *ngIf = "i==0">
        <a id="{{object.code}}" class="nav-link active" (click)="clicked(object)">{{object.name}}</a>
    </li>
    <li class="nav-item" *ngIf = "i!=0">
        <a id="{{object.code}}" class="nav-link" (click)="clicked(object)">{{object.name}}</a>
    </li>
</ul>

So the first element is active when the ul is loaded. Now I want to add the active class to the selected <a></a> and toggle that which has active. How can I achieve it?

EDIT:

I simplified to this:

<ul id="navbar-example" class="nav nav-pills nav-stacked" *ngFor="let object of objects;">
    <li class="nav-item" >
        <a [ngClass]="{ 'active': selected == object }"(click)="clicked(object)">{{object.names}}</a>
    </li>
</ul>

but it does not work. This is my component:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { objectsService } from './objects.service';
import { object } from './object';


@Component({
  selector: 'objects',
  styles: [require('./object.css')],
  template: require('./objects.html'),
})
export class objects implements OnInit {
  objects: object[];
  codvisita: string;
  selected: any;

  constructor(private route: ActivatedRoute, private objectsService: objectsService) {
  }

  ngOnInit() {
    this.route.params.forEach((params: Params) => {
      this.codvisita = params['id'];
    });
    this.objectsService.getobjects(this.codvisita)
      .subscribe(
        objects => {
          this.objects = objects;
          this.selected = this.objects[0];
          console.log(this.selected);
        }
      );
  }

  clicked(e) {
    this.selected = e;
    console.log(this.selected);
  }
}

Stefan Svrkota · Accepted Answer · 2016-10-18 19:14:40Z

14

Create a variable in your component, let's call it temp and then set value of temp to selected object in your click event:

temp: any;

clicked(object) {
    this.temp = object;
}

And then in your template you can use NgClass directive to achieve what you want:

<ul id="navbar-example" class="nav nav-pills nav-stacked" *ngFor="let object of objects; let i = index;">
    <li class="nav-item">
        <a id="{{object.code}}" class="nav-link" [ngClass]="{ 'active': temp.code == object.code }" (click)="clicked(object)">{{object.name}}</a>
    </li>
</ul>

edited Oct 18, 2016 at 19:14

answered Oct 18, 2016 at 18:44

Stefan Svrkota

50.9k10 gold badges100 silver badges88 bronze badges

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

5 Comments

FacundoGFlores Over a year ago

It did not work for me. Look active is a class for <a>. I updated my post

Stefan Svrkota Over a year ago

@FacundoGFlores Does console.log(this.selected); print the object you select?

FacundoGFlores Over a year ago

Yes, and it is the first one

Stefan Svrkota Over a year ago

@FacundoGFlores Oh I made such a silly mistake, you can't compare objects just like that. I'll edit my post in a moment, you need to compare object.code or some other unique value instead of whole object.

Stefan Svrkota Over a year ago

@FacundoGFlores Glad I could help. Just make sure that object.code or whatever value you are using as comparison is unique because if you have same object.code in multiple objects, all of them will get active class.

Collectives™ on Stack Overflow

Angular2 - Adding CSS class to selected element

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related