CODEWITHSUNDEEP
htmlangularjsionic2
kj creations
kj creations

Reputation: 43

hide an ion-item inside poperoverlist using ng-if

i am trying to hide an list item based on a contition...........but it is not working as expected......i initialized tof(variable) as false but the item always remains visible irrespective of the value of tof

@Component({
 template: `
<ion-list>
  <button ion-item (click)="navHome()"><ion-icon name="home"></ion-icon> Home</button>
  <button ion-item (click)="navSessionList()">
    <ion-icon ios="ios-calendar" md="md-calendar"></ion-icon> Our Monthly Gatherings </button>
  <button ion-item (click)="navSpeakers()">
  <ion-icon ios="ios-contacts" md="md-contacts"></ion-icon> Speakers </button>

  // ============i want to hide the below item===============================

  <button  ion-item ng-if="tof === 'true'" (click)="navProfile()">
    <ion-icon ios="ios-contact" md="md-contact"></ion-icon> My Profile </button>

  // =============^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^==================================

  <button ion-item (click)="navLogin()"><ion-icon ios="ios-log-in" md="md-log-in"></ion-icon> Login </button>      
</ion-list>
`})

below is the original code(i have removed some line......as its very large)

   ` import {Component} from '@angular/core';
    import {NavController, AlertController} from 'ionic-angular';
    import { MenuController } from 'ionic-angular';
import { PopoverController, ViewController,  LoadingController } from 'ionic-angular';
@Component({
  template: `
    <ion-list>
      <button ion-item (click)="navHome()"><ion-icon name="home"></ion-icon> Home</button>
      <button ion-item (click)="navSessionList()">
        <ion-icon ios="ios-calendar" md="md-calendar"></ion-icon> Our Monthly Gatherings </button>
      <button ion-item (click)="navSpeakers()">
      <ion-icon ios="ios-contacts" md="md-contacts"></ion-icon> Speakers </button>

      // ============i want to hide the below item===============================

      <button  ion-item ng-if="tof === 'true'" (click)="navProfile()">
        <ion-icon ios="ios-contact" md="md-contact"></ion-icon> My Profile </button>

      // =============^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^==================================

      <button ion-item (click)="navLogin()"><ion-icon ios="ios-log-in" md="md-log-in"></ion-icon> Login </button>      
    </ion-list>
  `
})
class PopoverPage {

  constructor(public viewCtrl: ViewController,public navCtrl: NavController) {
  this.navCtrl=navCtrl;
   }


  }

@Component({
  templateUrl: 'build/pages/about/about.html',
  providers: [EventData]
})
export class LinkToRegistration {
  public tof ="false";
  constructor(private navCtrl: NavController,
  public popoverCtrl: PopoverController,
  public viewCtrl: ViewController,
  public alertCtrl: AlertController,
  private eventData: EventData,
    public userData: UserData,
   public loadingCtrl: LoadingController) {
  this.navCtrl=navCtrl;
  this.eventData = eventData;
 this.userData.getsession().then((session) => {
      this.sessionid = session;
    });

}
ngAfterViewInit() {
    // this.getUsername();

    this.getUsername();


  }

  getUsername() {
    this.userData.getUsername().then((username) => {
      this.username = username;
      console.log("username is :"+this.username);
      if( this.username == null)
      {
        this.tof = "false";
        console.log("the value :"+this.tof);

      }
      else
      {
        this.tof = "true";

        console.log("the value else :"+this.tof)
      }
    });
  }`

thanks in advance for help

Upvotes: 1

Views: 3820

Answers (2)

sebaferreras
sebaferreras

Reputation: 44669

Just like @sameera207 says, you need to use *ngIf instead of ng-if in Angular2.

 <button  ion-item *ngIf="tof" (click)="navProfile()">

Also, when assigning a value to a boolean property, instead of doing it like this:

public tof = "false"; // <- this assigns a string with the value 'false'

do it like this:

public tof = false;  // now tof is a boolean property and the *ngIf should work.

Because of that, you'd need to modify the getUsername method too:

getUsername() {
    this.userData.getUsername().then((username) => {

      this.username = username;
      console.log("username is :" + this.username);

      if(this.username == null)
      {
        this.tof = false; // <-- now is a boolean property
        console.log("the value :" + this.tof);
      }
      else
      {
        this.tof = true; // <-- now is a boolean property

        console.log("the value else :" + this.tof)
      }
    });
  }

Upvotes: 0

sameera207
sameera207

Reputation: 16629

ng-if is Angular1 and with Angular2 its *ngIf

So you can do

<button ion-item *ngIf="tof === 'true'" (click)="navProfile()">

however if you want to just hide an item I would recommend to use hidden attribute

<button ion-item [hidden]="tof === 'true'" (click)="navProfile()">

Edit:

Based on the comment, if you set the value to true or false not "true" or "false" (strings) try

<button ion-item [hidden]="!tof" (click)="navProfile()">

Upvotes: 2

Related Questions