Hide/show individual items inside ngFor

Question

I need to show / hide part of component. Here is Angular2 example.

<li *ngFor=" #item of items " >   <a href="#" (onclick)="hideme = !hideme">Click</a>   <div [hidden]="hideme">Hide</div> </li> 

Suppose we have only 2 items. Problem here that it works on both items. So it hides and shows div part in both components. It could be perfect if we could have something like this:

<li *ngFor=" #item of items " >    <a href="#" (onclick)="this.hideme = !this.hideme">Click</a>    <div [hidden]="this.hideme">Hide</div> </li> 

So is there some simple way to solve this problem ?

Answer 1

You're hideme variable is global. Perhaps you could attach it to the current item:

<li *ngFor=" #item of items " >   <a href="#" (onclick)="item.hideme = !item.hideme">Click</a>   <div [hidden]="item.hideme">Hide</div> </li> 

Otherwise you need to use a dedicated object object from your component. Here is a sample:

<li *ngFor="let item of items " >   <a href="#" (onclick)="hideme[item.id] = !hideme[item.id]">Click</a>   <div [hidden]="hideme[item.id]">Hide</div> </li> 

Don't forget to initialize the hideme object this way in your component:

hideme:<any> = {}; 

Edit

If you want to make this work like tabs, you need a bit more work ;-)

<li *ngFor="let item of items " >   <a href="#" (onclick)="onClick(item)">Click</a>   <div [hidden]="hideme[item.id]">Hide</div> </li> 

And to display the clicked element and hide others:

onClick(item) {   Object.keys(this.hideme).forEach(h => {     this.hideme[h] = false;   });   this.hideme[item.id] = true; } 

Answer 2

is work for me :

in your compoment decler about hideme as array

hideme=[] 

and in the ngFor do that:

<li *ngFor="item of items;let i = index " >    <a (click)="hideme[i] = !hideme[i]">show/hide</a>    <div [hidden]="hideme[i]">The content will show/hide</div> </li>