javascript - How to toggle class only current element angular2 - Stack Overflow

admin管理员组

文章数量:1221410

here is my code examples. In my case toggle class works for every li element

   <ul class="nav nav-pills pull-right">
        <li *ngFor="let x of nav" class="presentation" (click)="active = !active" [ngClass]="toggleClass()">
            <a href="#">{{x.menu}} </a>
        </li>
    </ul>

js

 export class AppComponent {
  active = false;
  nav = NAVIGATION;

  //Toggle Class

  toggleClass(){
    if(this.active){
      return 'active';
    } else {
      return '';
    }
  }

here is my code examples. In my case toggle class works for every li element

   <ul class="nav nav-pills pull-right">
        <li *ngFor="let x of nav" class="presentation" (click)="active = !active" [ngClass]="toggleClass()">
            <a href="#">{{x.menu}} </a>
        </li>
    </ul>

js

 export class AppComponent {
  active = false;
  nav = NAVIGATION;

  //Toggle Class

  toggleClass(){
    if(this.active){
      return 'active';
    } else {
      return '';
    }
  }

• javascript
• angular

Share Improve this question Follow edited Jan 17, 2017 at 9:05 Mistalis 18.3k1313 gold badges7777 silver badges9797 bronze badges asked Jan 17, 2017 at 8:33 Val DoVal Do 2,69544 gold badges2121 silver badges3737 bronze badges

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 9

With following code, you don't need to write typescript code,

<ul class="nav nav-pills pull-right">
        <li *ngFor="let x of nav;let i=index" 
             class="presentation" 
             (click)="isClicked=i"             
             [class.active]="isClicked==i">    
             <a href="#">{{x.menu}}</a>
        </li>
</ul>

You can make a directive and use @HostBinding

Example

import { Directive, ElementRef, HostBinding } from '@angular/core';

@Directive({
    selector: '[my-directive]'
})

export class MyDirective {
    @HostBinding('class.active') isActive = false;

    toggle() {
        this.isActive = !this.isActive;
    }

}

Use like this :

<li [my-directive] (click)="toggle()">blah</li>

You should store the active variable per item, not on the whole component with all the li's:

<li *ngFor="let x of nav" (click)="x.active = !x.active" ... >

You can use the following code in your template to display active class:

[class.active]="x.active"

You have to add an active property to your nav interface/class:

<ul class="nav nav-pills pull-right">
   <li *ngFor="let x of nav" 
       class="presentation" 
       (click)="nav.active = !nav.active" 
       [class.active]="nav.active"
   >
      <a href="#">{{x.menu}} </a>
   </li>
</ul>

But seeing as that you are trying to select a navigation item, i would guess that you only want to select one. You have to change your template to something like this:

<ul class="nav nav-pills pull-right">
   <li *ngFor="let x of nav" 
       class="presentation" 
       (click)="active = x" 
       [class.active]="x === active"
   >
      <a href="#">{{x.menu}} </a>
   </li>
</ul>

In your component you should change your active declaration from boolean to your nav item class/interface/any

You can use the HostListener for the directive to be pure

export class MyDirective {
@HostBinding('class.active') isActive = false;

@HostListener('click', ['$event'])
onClick(e) {
   this.isActive = !this.isActive;
}
}

And use the html

<li [my-directive]>blah</li>

本文标签： javascriptHow to toggle class only current element angular2Stack Overflow