ngClass toggle particular element only while using ngFor Angular5

0
votes

I want to toggle particular element when clicked on click event and its in loop to toggle all class, means all div show. Here is my code

<div *ngFor="let xyz of abc">
    <span (click)="showOptions = !showOptions"></span>
    <ul [ngClass]="{show:showOptions}">
        <li> some text</li>
    </ul>
    <div>{{xyz}}</div>
</div>

It should open next element not all!! any help?

1
angularangular5ngforng-class

1 Answers

1
votes

This happens because you are using one boolean for each of your ngFor loop element. You should try to add a boolean field to your array elements:

abc = [
    {
        text: 'el1',
        show: false
    },
    {
        text: 'el2',
        show: false
    },
    {
        text: 'el3',
        show: false
    },
]

In your template :

<div *ngFor="let xyz of abc">
    <span (click)="xyz.show = !xyz.show"></span>
    <ul [ngClass]="{show:xyz.show}">
        <li>{{xyz.text}}</li>
    </ul>
</div>

Note

You could also use ngIf to display/hide your options list:

<ul *ngIf="xyz.show">