5

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 '';
    }
  }

5 Answers 5

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>
Sign up to request clarification or add additional context in comments.

Comments

3

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>

Comments

2

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"

Comments

1

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

Comments

1

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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.