Display the ion-button if the *ngIf condition is not present

I am working with an array of cards that contain download buttons. My goal is to hide the download button in the first div if I have already downloaded and stored the data in the database, and then display the second div.

<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 the database -->
      <div *ngIf="n == data.task"> <!-- if the data.task key exists, the buttons are displayed -->
        <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>
angulartypescriptionic4

Answer №1

If you're looking to achieve a specific goal using just the template, that might not be possible. You can find more insights on this topic here.

One workaround is to cache the results within your component by utilizing 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)
}

Subsequently, your template code can make use of 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>

A different approach, without relying on Map, would involve assigning the result to a property on the data object.

Answer №2

If you're looking to incorporate ngIf with else into your code, consider the following adjustment to your template structure:

<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>

Answer №3

To ensure that data has been downloaded, you can introduce a local boolean flag in the data object. Additionally, modifications to the saveDate(data) function are necessary:

<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><br/>

    <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;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is a loading screen necessary when setting up the Stripe API for the checkout session?

While working on my web app and implementing the Stripe API for creating a checkout session, I encountered an issue where there is a white screen displayed awkwardly when navigating to the Stripe page for payments. The technology stack I am using is NextJ ...

reactjstypescriptnext.jsstripe-payments

Is it feasible to pre-render an Angular2 view invisibly when hovering?

Can a view be preloaded and prerendered invisibly upon hover? I have an application that displays a list of items. Each item is its own component, and when you click on any of these items, it is replaced by a detailed view (another component) of the same ...

angularoptimizationhoverpreload

After integrating session store into my application, nestjs-sequelize is not synchronizing with any models

I'm currently working on developing a Discord bot along with a website dashboard to complement it. Everything is running smoothly, except for the backend Nestjs API that I am in the process of creating. I decided to use Sequelize as the database for m ...

mysqltypescriptdiscordsequelize.jsnestjs

Issue with bi-directional data binding in Angular's matInput component

When working on my template... <input matInput placeholder="Amount" [(value)]="amount"> In the corresponding component... class ExampleComponent implements OnInit { amount: number = 0; ... } The binding doesn't seem to work as expect ...

angulartypescript

Class property in Typescript is initialized in the constructor, but is undefined in a member function

I'm encountering a recurring problem while developing an Electron application using Typescript. The backend has a set of controllers, with the AppController managing file system interactions and WindowController handling basic window functions. Here&a ...

typescriptelectroneventemitter

When working with Typescript, NextAuth throws errors while embedding

When attempting to implement NextAuth into my Typescript application, I encounter two errors: one with NextAuth and the other with NextAuthOptions. import NextAuth from "next-auth" import { NextAuthOptions } from "next-auth" import Go ...

typescriptnext.jsnext-auth

What causes the lack of impact on lambda rendering speed despite integrating webpack?

Hey there, I've been working on implementing webpack for a project that involves microservices, Node.js, TypeScript, AWS, and AWS SAM. My main objectives are: Reduce the cold start time of lambda functions. Minimize security vulnerabilities by e ...

javascriptnode.jstypescriptamazon-web-serviceswebpack

Avoid running multiple YouTube views simultaneously within an AngularJS application

Currently, I have an Angularjs application that displays a list of Youtube videos utilizing the videogular node module. An issue has arisen where users can play multiple Youtube videos simultaneously, leading to potential violations of Youtube's poli ...

javascriptangularjsangularyoutube

What is preventing me from using the "@" symbol to substitute the lengthy relative path in my __tests__ directory?

https://i.sstatic.net/U1uW3.png When I initialized my Vue project using vue-cli, I encountered an issue where the use of @ in my src folder was functioning correctly, but not in my __tests__ folder. I have already added configurations to my tsconfig.json ...

typescriptvue.jsvue-cli

Issue with Pagination in Angular 7: Functioning Error

I am having trouble with my pagination setup. I am struggling to understand how to properly pass this.total = res.totalPage; from the Component to the Service so that it can count the pages correctly. Currently, it is only displaying one page as shown in t ...

angulartypescriptngx-pagination

Utilizing Angular 2's ViewChild within the <router-outlet> Tag

I've been working on a project using Angular 2. Within the MainComponent, I'm utilizing @ViewChild to reference child components. The MainComponent also contains a <router-outlet> where various components are loaded. My query is, how can I ...

angular

Passing a callback to a third-party library resulted in an unexpected error

My React+TypeScript code utilizes a component from a third-party library. <ThirdPartyComponent onSelect={(value: any) => {...}} /> The eslint-typescript tool is flagging this as an error: Unexpected any. Specify a different type. eslint(@type ...

reactjstypescripteslinttypescript-eslint

What is the process for configuring vue.config.js with typescript?

Just starting out with typescript and running into an issue while configuring vue.config.js const webpack = require("webpack"); module.exports = { plugins: [ new webpack.DefinePlugin({ __VUE_I18N_FULL_INSTALL__: true, __ ...

typescriptvue.jswebpack

Converting time from 00:00:01 to a format of 8 minutes and 49 seconds in Angular

Is there a way to transform a time value from 00:00:01 (not a date object) into a format showing 8 minutes and 49 seconds? Even after consulting the Angular 'date pipe' documentation, I couldn't find a solution to this issue. ...

javascriptangulartypescriptdatefilterdate-pipe

The specified file cannot be found within the Node file system

I am working on a project that involves reading a file using Node fs, and I have the following code: const files: FileSystemTree = { "Component.tsx": { file: { contents: fs.readFileSync( `../../apps/components ...

node.jstypescriptfilesystemsvitestnode.js-fs

Dealing with Angular error interceptor and handling multiple occurrences of 401 responses

I'm currently working on implementing a refresh token feature in my Angular frontend to handle expired access tokens. The issue I'm facing is that upon reloading the page after token expiration, multiple requests are sent to the backend simultane ...

angularaccess-tokenrefresh-tokenangular-http-interceptors

Challenges with Angular 4 service initialization

Having trouble with my authentication service. The constructor is being called 259 times when making an HTTP request, but only once when the call is removed. I am using a shared module to provide a unique instance of the service. Angular version: 4.4.4 C ...

javascriptangularangular-httpclient

Error: Unable to call function onPopState from _platformLocation due to TypeError

After building an angular application, I encountered a strange issue where it runs smoothly in non-production mode but throws an error when running with --prod: Uncaught TypeError: this._platformLocation.onPopState is not a function I have double-checked ...

angulartypescript

What impact does nesting components have on performance and rendering capabilities?

Although this question may appear simple on the surface, it delves into a deeper understanding of the fundamentals of react. This scenario arose during a project discussion with some coworkers: Let's consider a straightforward situation (as illustrat ...

javascriptreactjstypescript

Is it possible to access the line number of a node using the TypeScript compiler API?

Is there a method to retrieve the line number of a node besides using node.pos? For example, something like node.lineNumber? ...

typescriptabstract-syntax-treestatic-analysistypescript-compiler-api