Show ion-button when *ngIf does not exist

Question

I have an array of cards that displays download buttons. I wish to hide the download button in the first div if I have already downloaded and saved the data to the database and the second div then displays.

<ion-card *ngFor="let data of itemList.list let i = index">
  <ion-card-content>

    <div> <!-- I want this to display if *ngIf="n == data.task does not display -->
      <ion-button (click)="saveData(data.link)" >Download for offline use</ion-button>
    </div>

    <div *ngFor="let n of loop"> <!-- loops through keys in database -->
      <div *ngIf="n == data.task"> <!-- if data.task key exists the buttons display -->
        <div class = "linkButtons">
          <ion-button (click)="openForm(data.Type, data.task)">&nbsp;&nbsp;Open&nbsp;&nbsp;</ion-button>
          <ion-button (click)="syncData()">Sync</ion-button>
          <ion-button (click)="deleteAudit( n )">Delete</ion-button>
        </div>
      </div>
    </div>

  </ion-card-content>
</ion-card>

score 1 · Answer 1 · answered Jan 17 '20 at 22:06

1

You might want to use ngIf with else (I have also changed the order of your template a bit; I hope it makes sense):

<ion-card *ngFor="let data of itemList.list">
  <ion-card-content>

    <div *ngIf="n === data.task; else linkButtons">
      <ion-button (click)="saveData(data.link)">
        Download for offline use
      </ion-button>
    </div>

    <ng-template #linkButtons>
      <div *ngFor="let n of loop">
        <div class="linkButtons">
          <ion-button (click)="openForm(data.Type, data.task)">Open</ion-button>
          <ion-button (click)="syncData()">Sync</ion-button>
          <ion-button (click)="deleteAudit(n)">Delete</ion-button>
        </div>
      </div>
    </ng-template>

  </ion-card-content>
</ion-card>

answered Jan 17 '20 at 22:06

pzaenger

11,381
3
45
46

This answer did not work for me as i still need *ngFor="let data of itemList.list let i = index" . to list through my audits. The *ngFor="let n of loop" to list through saved keys. But your answer is really good at explaining using ngIf with else so I marked your answer as useful – Thomas Degroot Jan 20 '20 at 22:04
Glad my answer is at least a bit helpful :) And indeed, I was not totally sure about your requirements. – pzaenger Jan 20 '20 at 22:12
My requirements are a little complex so I will be offering bounty for this. – Thomas Degroot Jan 20 '20 at 22:14

Clint · Accepted Answer · 2020-01-21T04:25:15.523

You can't accomplish what you're trying to do with the template only, you can learn more about why here.

What you can do is cache the results in your component with a Map.

dataTasks = new Map<any, boolean>()
taskEquals(data: any, n: any) {
    if (!this.dataTasks.get(data)) {
        this.dataTasks.set(data, data.task == n)
    }
    return data.task == n
}

hasTask(data: any) {
    return !!this.dataTasks.get(data)
}

Then your template code can use these functions:

<ion-card *ngFor="let data of itemList.list let i = index">
  <ion-card-content>

    <div *ngIf="hasTask(data) == false">
      <ion-button (click)="saveData(data.link)">Download for offline use</ion-button>
    </div>

    <div *ngFor="let n of loop">
      <div *ngIf="taskEquals(data, n)">
        <div class = "linkButtons">
          <ion-button (click)="openForm(data.Type, data.task)">&nbsp;&nbsp;Open&nbsp;&nbsp;</ion-button>
          <ion-button (click)="syncData()">Sync</ion-button>
          <ion-button (click)="deleteAudit( n )">Delete</ion-button>
        </div>
      </div>
    </div>

  </ion-card-content>
</ion-card>

An alternative solution without using Map would be to assign the result to a property on the data object.

score 1 · Answer 3 · edited Jan 21 '20 at 15:51

You may use a local boolean flag in data object to check if data has been downloaded, the saveDate(data) function will also need modifications:

<ion-card *ngFor="let data of itemList.list let i = index">
  <ion-card-content>

    <div *ngIf="data.downloaded">
      <ion-button (click)="saveData(data)" >Download for offline use</ion-button>
    </div>

    <div *ngFor="let n of loop"> <!-- loops through keys in database -->
      <div *ngIf="n == data.task"> <!-- if data.task key exists the buttons display -->
        <div class = "linkButtons">
          <ion-button (click)="openForm(data.Type, data.task)">&nbsp;&nbsp;Open&nbsp;&nbsp;</ion-button>
          <ion-button (click)="syncData()">Sync</ion-button>
          <ion-button (click)="deleteAudit( n )">Delete</ion-button>
        </div>
      </div>
    </div>

  </ion-card-content>
</ion-card>

saveData(data){
    // remaining logic
    data.downloaded = !data.downloaded;
}

Show ion-button when *ngIf does not exist

3 Answers3