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>

Answer 1

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.

Answer 2

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