Class Binding when applying it to a *ngFor for an element

Question

I need some help and for some reason I can't think of how to resolve it

I have an array of objects that I am looping through with *ngFor with

I want to add class binding to a field (description details) in my array but I do not want the action to happen to every 'Detailed Description'

just the one I am working with. Not sure if this is possible. Hopefully I am making sense.

Currently when I expand 'Detailed Description' Every object that has 'Detailed Description' also expands (Don't want that to happen)!

------HTML-----------

<div *ngFor="let n of Entry">
        <ul class="list-group">
         <li>
          <p class="description"> Detailed Description
           <span class="glyphicon" [class.glyphicon-minus- 
           sign]="expandedDetails" [class.glyphicon-plus- 
           sign]="!expandedDetails" (click)="toggleDetails()"></span>
            </p>
            <span class="entryDetails" *ngIf="expandedDetails == true"> 
             {{n.description}}</span>

---------TS----------------------

toggleDetails() {
this.expandedDetails = !this.expandedDetails;

}

Possible duplicate of [Hide/show individual items inside ngFor](https://stackoverflow.com/questions/36873900/hide-show-individual-items-inside-ngfor) — ConnorsFan, Aug 31 '18 at 15:40
You should add the `expandedDetails` flag to the `Entry` class and toggle the flag only for the item that you click: `(click)="n.expandedDetails = !n.expandedDetails"`. The condition for showing the details would be: `*ngIf="n.expandedDetails"`. — ConnorsFan, Aug 31 '18 at 15:41

score 1 · Answer 1 · answered Aug 31 '18 at 15:41

1

You want to use trackby $index on the for-each then you can use this value to pass to toggleDetails. So you will only open the details for that row/item.

Let me get an example

answered Aug 31 '18 at 15:41

Peter Mac

21
4

score 1 · Accepted Answer · answered Aug 31 '18 at 16:19

1

Try this

Define toggle variable in ts file

 toggle=[]

In your html modify your code like this

<div *ngFor="let n of Entry;let i =index">
        <ul class="list-group">
         <li>
          <p class="description"> Detailed Description
           <span class="glyphicon" [class.glyphicon-minus- 
           sign]="expandedDetails" [class.glyphicon-plus- 
           sign]="!expandedDetails" (click)="toggle[i]=toggle[i]  "></span>
            </p>
            <span class="entryDetails" *ngIf=" toggle[i]"> 
             {{n.description}}</span>

answered Aug 31 '18 at 16:19

Chellappan வ

23,645
3
29
60

(click)="toggle[i]=!toggle[i] – Rob DePietro Aug 31 '18 at 16:48
Yes use use index to find the element – Chellappan வ Aug 31 '18 at 16:49

Class Binding when applying it to a *ngFor for an element

2 Answers2