Angular 2 - Toggle class only on single element [duplicate]

Question

I have a list of elements which looks like :

 <ul *ngFor="let period of periodsDate">
        <li                         
        [class.show]="isShown" (click)="toggleClass()">
        <a>{{ period.id }} </a>
        </li>
</ul>

I add/remove the 'show' class by using the following method:

toggleClass() {
        this.isShown = !this.isShown;
    }

The problem I have is that since there are multiple <li> elements, every time I click on any of them the 'show' class is added to all of them. What I want to achieve is that the class 'show' is only added to the <li> element that was just clicked.

period.isShown = !period.isShown (passing period as an argument into toggleClass) — Daniel Beck
– Daniel Beck, Commented May 17, 2017 at 13:05

Sanjay Nishad · Accepted Answer · 2017-05-17 13:06:36Z

0

Use with object period, do not create another object try below code

<ul *ngFor="let period of periodsDate">
    <li class="dropdown__nested" [class.show]="period.isShown" (click)="toggleClass(period)">
        <a>{{ period.key }} </a>
    </li>
</ul>

Typscript

toggleClass(period) {
    period.isShown = !period.isShown;
}

answered May 17, 2017 at 13:06

Sanjay Nishad

1,62515 silver badges29 bronze badges

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

3 Comments

greatTeacherOnizuka Over a year ago

This works but why would I need to extend period? It seems redundant

Sanjay Nishad Over a year ago

did you create class for period? if yes, you can add isShown:boolean in that class.

briosheje Over a year ago

@greatTeacherOnizuka: because you're in a for loop, the toccleClass function argument has to be something, else how can you guess which of the periodsDates you have to change? there are two ways to handle this: 1) the way Sanjay provided: use a toggleClass function, pass to it the reference to an element and toggle a property. 2) extend the "period" object by adding a function that toggles the isShown variable. Both are good, but the second one, to me, is cleaner. Beware: the this in your toggleClass() function is NOT the this you are expecting.

Collectives™ on Stack Overflow

Angular 2 - Toggle class only on single element [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related