Ionic / Angular ion-item with button click to select hide selected ion-item

Question

I am using Ionic 5 / Angular and I have a list of ion-item's. Each one has a button.

The code example below:

<ion-list>
    <ion-item>
        <ion-label>One</ion-label>
            <ion-button slot="end" (click)="selfhide()">
                <ion-icon slot="icon-only" name="close-outline"></ion-icon>
            </ion-button>
    </ion-item>
    <ion-item>
        <ion-label>Two</ion-label>
            <ion-button slot="end" (click)="selfhide()">
                <ion-icon slot="icon-only" name="close-outline"></ion-icon>
            </ion-button>
    </ion-item>
    <ion-item>
        <ion-label>Three</ion-label>
            <ion-button slot="end" (click)="selfhide()">
                <ion-icon slot="icon-only" name="close-outline"></ion-icon>
            </ion-button>
    </ion-item>
</ion-list>

I need to be able to click on any and for it to self hide.

So if I clicked on the button of the first ion-item then that ion-item will disappear.

How can I do this?

As soon as you get the good keywords, google first : stackoverflow.com/questions/45549297/angular-hide-with-button — Ostn
– Ostn, Commented Apr 7, 2020 at 13:32

Ostn · Accepted Answer · 2020-04-07 13:28:35Z

Here is a solution using ngIf :

<ion-list>
    <ion-item *ngIf="display.one">
        <ion-label>One</ion-label>
            <ion-button slot="end" (click)="selfhide('one')">
                <ion-icon slot="icon-only" name="close-outline"></ion-icon>
            </ion-button>
    </ion-item>
    <ion-item *ngIf="display.two">
        <ion-label>Two</ion-label>
            <ion-button slot="end" (click)="selfhide('two')">
                <ion-icon slot="icon-only" name="close-outline"></ion-icon>
            </ion-button>
    </ion-item>
    <ion-item *ngIf="display.three">
        <ion-label>Three</ion-label>
            <ion-button slot="end" (click)="selfhide('three')">
                <ion-icon slot="icon-only" name="close-outline"></ion-icon>
            </ion-button>
    </ion-item>
</ion-list>

And in your component

display = { one:true, two: true, three: true };


selfHide(item) {
    display[item] = false;
}

Marian Klösler · Accepted Answer · 2020-04-07 13:47:40Z

The solution by Noelmout is absolutely fine, but I did another one in a more generic way so your list could be dynamic. I also added a "show all"- button to display all items again.

Here the component.html:

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-list>
    <ng-container *ngFor="let item of items">
      <ion-item *ngIf="item.visible">

        <ion-text slot="start">{{item.name}}</ion-text>
        <ion-button slot="end" (click)="hideItem(item)">
          <ion-icon slot="icon-only" name="close"></ion-icon>
        </ion-button>

      </ion-item>
    </ng-container>
  </ion-list>

  <ion-button (click)="displayAllItems()">
    show all
  </ion-button>

</ion-content>

And the according component.ts:

import { Component } from "@angular/core";
import { NavController } from "ionic-angular";

@Component({
  selector: "page-home",
  templateUrl: "home.html"
})
export class HomePage {
  public items = [
    { name: "One", visible: true },
    { name: "Two", visible: true },
    { name: "Three", visible: true },
    { name: "Four", visible: true }
  ];

  constructor(public navCtrl: NavController) {}

  hideItem(item: { name: string; visible: boolean }) {
    item.visible = false;
  }

  displayAllItems() {
    this.items.forEach(item => (item.visible = true));
  }
}

I also created a project on stackblitz for playing around with it.

Collectives™ on Stack Overflow

Ionic / Angular ion-item with button click to select hide selected ion-item

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related