CODEWITHSUNDEEP
angularionic-framework
Rabbani_
Rabbani_

Reputation: 470

How can I hide ionic item?

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>

Upvotes: 3

Views: 14768

Answers (2)

Jay Ordway
Jay Ordway

Reputation: 1749

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

Upvotes: 1

Arnold Parge
Arnold Parge

Reputation: 6867

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.

Upvotes: 6

Related Questions