Hiding (and showing) list items in ionic

Ionic Framework ionic-v3
1

Is it possible inside ion-list to hide an item in ionic 2? I tried the same way as in ionic 1 using ng-show, but it doesn’t work.

2

use *ngIf instead of ng-show
or [style.display]=""

1 Like
3

I tried this without success. Here’s my code:

<ion-list>
   <ion-item-sliding *ngFor="#item of items" #slidingItem>
     <ion-item *ngIf="item.deleted === false">{{item.name}} </ion-item>
     <ion-item-options>
       <button (click)="showEditModal(item, slidingItem)"><ion-icon name="create"></ion-icon>Bearbeiten</button>
       <button danger (click)="doConfirm(item, slidingItem)"><ion-icon name="trash"></ion-icon>Löschen</button>
     </ion-item-options>
   </ion-item-sliding>
 </ion-list>

I can’t see where the error is. Can you help me? Thanks in advance!

1 Like
4

I don’t see any issue with that. Are you sure item.deleted === false on the ones you don’t want to show? Perhaps it’s a falsey item.deleted = 0 instead?

1 Like
5

Your code looks fine. Are you sure that the item.deleted is false?

6

If *ngIf=“item.deleted === false” is there, there are no items shown in the list. But they are all shown, if *ngIf=“item.deleted === false” is remove.

The problem isn’t the value of item.deleted. If {{item.deleted}} is inserted in ion-item, the values are shown as wanted.

7

99% your issue in the condition. Try use this code:

*ngIf="!item.deleted’

2 Likes
8

Thank you for your suggestion, but I tried this before without success.

At the moment I had some success by the following code:

<ion-list *ngFor="#item of items">
  <ion-item-sliding *ngIf="item.deleted === false" #slidingItem>
    <ion-item>{{item.fach}} ({{item.kuerzel}})</ion-item>
    <ion-item-options>
      <button (click)="showEditModal(item, slidingItem)"><ion-icon name="create"></ion-icon>Bearbeiten</button>
      <button danger (click)="doConfirm(item, slidingItem)"><ion-icon name="trash"></ion-icon>Löschen</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

Now the items with item.deleted === true are not shown anymore, but there’s an empty line after each item.

9

I would suggest you to filter the items in the class instead of doing it in the template:

<!-- template -->
<ion-list>
  <ion-item-sliding *ngFor="#item of getActiveItems()" #slidingItem>
    <ion-item>{{item.fach}} ({{item.kuerzel}})</ion-item>
    <ion-item-options>
      <button (click)="showEditModal(item, slidingItem)"><ion-icon name="create"></ion-icon>Bearbeiten</button>
      <button danger (click)="doConfirm(item, slidingItem)"><ion-icon name="trash"></ion-icon>Löschen</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

@Page(
    // ...
)
export class TestPage {
    // ...
    getActiveItems() {
        // NOTE: Returning a new array might mess up the change detection of Ng2.
        // TODO: Use an existing array instead of returning a new one each time.
        return this.items.filter(item => !item.deleted);
    }
}
1 Like
10

Just in case that you prefer to do the filtering in the template then you can do it this way:

<ion-list>
  <template ngFor #item="$implicit" [ngForOf]="items">
    <ion-item-sliding *ngIf="!item.deleted" #slidingItem>
      <ion-item>{{item.fach}} ({{item.kuerzel}})</ion-item>
      <ion-item-options>
        <button (click)="showEditModal(item, slidingItem)"><ion-icon name="create"></ion-icon>Bearbeiten</button>
        <button danger (click)="doConfirm(item, slidingItem)"><ion-icon name="trash"></ion-icon>Löschen</button>
      </ion-item-options>
    </ion-item-sliding>
  </template>
</ion-list>
11

Just want to chime in on this.

If you want to dynamically hide/show elements, you can use the DOMs api for this.

  <ion-card [hidden]="shouldHide">
    <ion-card-header>
      Card Header
    </ion-card-header>
    <ion-card-content>
      Hello World
    </ion-card-content>
  </ion-card>

And then somewhere in the class, shouldHide is a true/false value.

15 Likes
12

Thank you for your replies. At the moment I use the possibility with getActiveItems(), which was the first one, that works for me.

13

<ion-card [hidden]="!flag">
It worked for me

5 Likes
14

Hi @mhartington, you saved my time. tnx

15

Where is the documentation for <template>?

16

That’s a bit of a confusing question, because the post you’re replying to doesn’t include that element (although it does exist). Probably the best resource on the general topic is here.

17

This is what I am referring to: <template ngFor #item="$implicit" [ngForOf]="items">

18

My bad, I was somehow looking at the previous post that had it in a <!-- template --> comment.

The <template> element has been deprecated as of Angular 4, so you should look at the documentation for ng-template instead.