How do hide a list item with a toggle

Ionic Framework ionic-v3
1

Hi,
I tried so many ways to do this although I’m sure it’s simple.
Used ngModel, Ng-Show, Ng-If. Nothing seems to get it working
How would you hide the ion-item and just showing ion-item-divider ?

<ion-list *ngFor=“let group of groupedArticle”>

<ion-item-group >
  <ion-item-divider >{{group.rayon}}</ion-item-divider>
<ion-card *ngFor="let article of group.articles" >
<ion-item-sliding >
<ion-item >
  <h2>{{article.Nom}}</h2>
  <p>Genre de produit: <strong>{{article.Type}}</strong></p>
  <p>Marque: <strong>{{article.Marque}}</strong></p>
</ion-item>
effacer

Please help, it drives me crazy !

2

I did a very similar thing.

I had a list of group.rayon and every one of them had some group.articles.

What I did is assign an auxiliar variable to every group.rayon and initialized as false. Whenever you tap on your ion-item-divider you change the auxiliar variable to true.

Then, in your item, add: <ion-item *ngIf = "group.rayon.auxiliarVariable == true"> You can omit the == true.

That way you’ll have a list of dividers and your content will be “toggleable”.

3

I had a similar issue with a list that could be generated by the user, with user-populated items and user-determined length. I created a Map<string,boolean>, where the string key was a unique ID of the item, and the boolean value translated to either visible or hidden. Then each item has ngIf="nameOfMap.get(item.id)" The toggle created a key/value pair if none existed yet, and set it to true or false as appropriate.

4

Thanks a lot for answering ! In the meantime,I finally found what i was looking for :


It’s just like what you advised, isn’t it ?

5

Woaw, impressive !
How did you find that ?
I don’t have to go this way but I keep it in mind.
Thanks a lot

6

How did you find that ?

The MDN Javascript API recommends using Maps for collections instead of Objects, so I have more practice with Maps than maybe some Javascript programmers who didn’t read that section of that API. So applying a Map to this problem was “natural.”

RaulGM’s solution is fine – better than mine maybe – if you know exactly what the items in your list are, and you don’t expect them to change in a future update. With my solution, you pay extra in conceptual difficulty, and in return you get a solution that does not depend on the specifics of the list.

7

I’ve been reading this before but didn’t understand the interest.
Thanks for this.
I’ve been using it twice today !!!
:heart_eyes: