How can I hide ionic item?

Question

I have some input fields.But the input fields will show once at a time. I will get the info which one i need to show like below.

require_nid:false
require_pin:true

The from is below

<ion-col>
          <ion-list inset>
            <ion-item>
              <ion-label>
                  <ion-icon name="person"></ion-icon>
              </ion-label>
              <ion-input type="text" placeholder="Enter NID" #username required></ion-input>
            </ion-item>
            <ion-item>
              <ion-label>
                  <ion-icon name="person"></ion-icon>
              </ion-label>
              <ion-input type="text" placeholder="Enter sender Name" #password required></ion-input>
            </ion-item>
            <ion-item>
              <ion-label>
                  <ion-icon name="phone-portrait"></ion-icon>
              </ion-label>
              <ion-input type="text" placeholder="Enter sender phone number" #password required></ion-input>
            </ion-item>
          </ion-list>
        </ion-col>

Arnold Parge · Accepted Answer · 2018-05-20T05:48:38.633

6

You can either use *ngIf to completely remove the element.

OR

You can use [hidden] property to show or hide the element

Refer this link.

edited May 20 '18 at 05:48

answered May 20 '18 at 05:38

Arnold Parge

6,684
2
30
34

*ngIf is usually the cleanest way to completely remove it from padding, positioning, etc. The overhead isn't very high unless you put it on something with a serious amount of rendering (lots of children). – estacks May 20 '18 at 05:40

score 1 · Answer 2 · answered Apr 13 '19 at 09:51

In Ionic 4 you can use ion-hide as well as add breakpoints to determine when to hide based on the screen width.

Be sure to have imported the proper css file to your global.css

@import '~@ionic/angular/css/display.css';

https://ionicframework.com/docs/layout/css-utilities#element-display

How can I hide ionic item?

2 Answers2