CODEWITHSUNDEEP
typescriptionic-frameworkionic3ionic-native
Omar Hussein
Omar Hussein

Reputation: 1147

Ionic 3: Hide List/List Part in HTML on If condition

Ok so my app draws data by an input and pushes them into a list, this is the html code:

 <ion-list>
    <ion-item-divider color="light">
      Applicant Info:
    </ion-item-divider>
    <ion-item color="none">
      Applicant ID: {{id}}
    </ion-item>
    <ion-item color="none">
      Phone number: {{phone}}
    </ion-item>
    <ion-item>
      <div text-center> <button ion-button round color="danger"(click)='copyEmailApp()'>COPY EMAIL</button><button ion-button round color="danger"(click)='copyNumApp()'>COPY PHONE</button> </div>
    </ion-item>
    <ion-item-divider color="light">
      First Target (if exists):
    </ion-item-divider>
    <ion-item color="none">
      Name: {{targetname}}
    </ion-item>
    <ion-item color="none">
      Country Code: {{targetcountrycode}}
    </ion-item>
    <ion-item color="none">
      Phone number: {{targetphone}}
    </ion-item>
    <ion-item color="none">
      Email: {{targetemail}}
    </ion-item>
    <ion-item>
      <div text-center> <button ion-button round color="danger"(click)='copyEmailTarget1()'>COPY EMAIL</button><button ion-button round color="danger"(click)='copyNumTarget1()'>COPY PHONE</button> </div>
    </ion-item>
    </ion-list>

Now this Target and it's data may not exist, in that case I end up with part of my list looking like this: Target case None

Now this target's data is pulled from an array within my constructor as such:

this.targetname = navParams.get('infoList')[0].targets[0].name;

So I want to see how I can make an if condition that if the targets[0] sub-array doesn't exist that target part of my list to be not shown at all instead of shown empty, how can I do that?

Upvotes: 0

Views: 927

Answers (1)

Omar Hussein
Omar Hussein

Reputation: 1147

Ok, so the solution was to replace my html for the target with this:

<div *ngIf = "targetname != null; else elsetag">
    <ion-item>
      <ion-item-divider color="light">
        Target Info:
      </ion-item-divider>
      <ion-item color="none">
        Name: {{targetname}}
      </ion-item>
      <ion-item color="none">
        Country Code: {{targetcountrycode}}
      </ion-item>
      <ion-item color="none">
        Phone number: {{targetphone}}
      </ion-item>
      <ion-item color="none">
        Email: {{targetemail}}
      </ion-item>
      <ion-item no-lines>
        <div text-center> <button ion-button round color="danger"(click)='copyEmailTarget()'>COPY EMAIL</button><button ion-button round color="danger"(click)='copyNumTarget()'>COPY PHONE</button> </div>
      </ion-item>
    </ion-item>
  </div>
  
  <ng-template #elsetag>
      </ng-template>

Upvotes: 1

Related Questions