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>

Answer 1

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>