Hide/show individual items inside ngFor in angular 2

Question

I want to hide a span and show dropdown when span (Active) is click and after select the specific value hide the dropdown and again show span in the cell of the table for every span individually. how to achieve it?

<table class="table">
    <tbody>
        <tr *ngFor="let user of data | paginate: config; let i">             
            <td class="row">
                <a [routerLink]="['/user-edit', user.Id]" style="text-transform: capitalize;">{{user.FirstName}} {{user.LastName}}</a><br />
                {{user.Email}}<br />
                <i class="fa fa-user"></i> Developer
            </td>
            <td style="width:15px;" *ngIf="user.IsActive==false"><br /><br /><b>Blocked</b></td>
            <td *ngIf="user.IsActive==true">
                <div class="inline-edit">
                    <span [hidden]="!isDisplay" (click)="beginEdit(editText,i)">
                        Active

                    </span>
                    <span>
                        <ng-select [items]="items"
                        (selected)="selected($event,i)">
                    </ng-select>
                </span>
            </div>
        </td>
    </tr>
</tbody>
</table>

possible of duplicate https://stackoverflow.com/questions/36873900/hide-show-individual-items-inside-ngfor — Always Learn, Jun 07 '17 at 12:19
Possible duplicate of [Hide/show individual items inside ngFor](https://stackoverflow.com/questions/36873900/hide-show-individual-items-inside-ngfor) — daan.desmedt, Jun 07 '17 at 12:29

score 0 · Answer 1 · answered Jun 07 '17 at 12:22

you used the flag variable isDisplay, which is the same for every loop. add there some ID from user to distinct the flags for every loop. I am not sure, what beginEdit does, maybe you need to change it, too

<table class="table">
    <tbody>
        <tr *ngFor="let user of data | paginate: config; let i">             
            <td class="row">
                <a [routerLink]="['/user-edit', user.Id]" style="text-transform: capitalize;">{{user.FirstName}} {{user.LastName}}</a><br />
                {{user.Email}}<br />
                <i class="fa fa-user"></i> Developer
            </td>
            <td style="width:15px;" *ngIf="user.IsActive==false"><br /><br /><b>Blocked</b></td>
            <td *ngIf="user.IsActive==true">
                <div class="inline-edit">
                    <span [hidden]="!isDisplay[user.id]" (click)="beginEdit(editText,i)">
                        Active

                    </span>
                    <span>
                        <ng-select [items]="items"
                                   (selected)="selected($event,i)">
                        </ng-select>
                    </span>
                </div>
            </td>
        </tr>
    </tbody>
</table>

you can use i variable, too. But with userID you can store the setting for next use also when you change the order of elements in data — Eduard Void, Jun 07 '17 at 12:24

Hide/show individual items inside ngFor in angular 2

1 Answers1

Linked