Two tags attached to four hypertext links

Within my HTML code, I have hyperlinks present on every line. However, I am seeking to eliminate these hyperlinks specifically from "your previous balance" and "your new balance".https://i.sstatic.net/ekVGT.png

In the following HTML snippet:

<tr *ngFor="let l of statementLines; let i = index">
   <td scope="col">
      <span *ngIf="l.dateOperation.length > 0">
      {{l.dateOperation | dateddmmyyyy | addleadingzeroesleft:'10'}}
      </span>
   </td>
   <td scope="col"& gt;
      <span *ngIf="l.dateOperation.length > 0">
      {{l.dateValue | dateddmmyyyy | addleadingzeroesleft:'10'}}
      </span>
   </td>
   <td scope=& quot;col">
      <a (click)="goToAnnexe(l); false;" href=& quot;#">
      {{l.libelle}}
      </a>
   </td>
   ...

I believe the issue lies within this section:

<td scope="col">
      <a (click)="goToAnnexe(l); false;" href="#">
      {{l.libelle}}
      </a>
 </td>

In the TypeScript file:

goToAnnexe(annexe) {
    this.router.navigateByUrl("/portfolio/annexe/" + annexe.wholeLine.REFERENCEMOUV + "/" + annexe.wholeLine.NUM);
    console.log("text " + JSON.stringify(annexe));
}

I suspect that the issue stems from libelle, but I am uncertain how to address it.

prepareDataForTemplate(res) {
    var libelle1 = this.translate.instant('5019');
    var libelle2 = this.translate.instant('5020');
    if (res.RETURNCODE == 'OKK00') {
        this.statementDate = res.OUTEXT.DATE;
        this.statementLines.push({
            dateOperation: "",
            dateValue: "",
            libelle: libelle1,
            sign: (res.OUTEXT.SOLD >= 0 ? '+' : '-'),
            amount: res.OUTEXT.SOLD,
            wholeLine: {
                REFERENCEMOUV: ""
            }
        });
        for (var i = 0; i < res.OUTEXT.MVMESPECES.length; i++) {
            this.statementLines.push({
                dateOperation: res.OUTEXT.MVMESPECES[i]['DATEOPER'],
                dateValue: res.OUTEXT.MVMESPECES[i]['DATEVALEUR'],
                libelle: res.OUTEXT.MVMESPECES[i]['LIBELLE'],
                sign: (res.OUTEXT.MVMESPECES[i].MONTANT > 0 ? '+' : '-'),
                amount: res.OUTEXT.MVMESPECES[i].MONTANT,
                wholeLine: res.OUTEXT.MVMESPECES[i]
            });
        }
        this.statementLines.push({
            dateOperation: "",
            dateValue: "",
            libelle: libelle2,
            sign: (res.OUTEXT.SOLF > 0 ? '+' : '-'),
            amount: res.OUTEXT.SOLF,
            wholeLine: {
                REFERENCEMOUV: ""
            }
        });
    } else {

    }
}

Answer №1

To efficiently tackle this issue, we can simply verify the content of the l.libelle text and selectively display a hyperlink only when the value is neither "your previous balance" nor "your new balance"

<td scope="col">
   <ng-container *ngIf="l.libelle !== 'your previous balance' && l.libelle !== 'your new balance'; else elseNotDone">
     <a (click)="viewDetails(l); false;" href="#">
       {{ l.libelle }}
     </a>
   </ng-container>

   <ng-template #elseNotDone>
     <p>
       {{ l.libelle }}
     </p>
   </ng-template>
</td>

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

Having trouble installing Angular 4 with npm?

After installing Angular, I encountered an error when trying to use the command line "ng -v". Please refer to the attached jpeg file. My node version is 6.10.3. Does anyone have a solution? ...

Steps for converting an Array of tuples into a Union of Tuples

I am attempting to develop a custom type that, when given an array of tuples as input, will generate the union of each index within the tuple. This may not be the most accurate terminology, but I hope you understand what I mean. const entries = [["name", ...

Unable to add or publish text in CKEditor

In my ASP.NET MVC application, I am struggling to post the updated value from a CKEditor in a textarea. Here is the code snippet: <textarea name="Description" id="Description" rows="10" cols="80"> This is my textarea to be replaced with CKEditor ...

Issues with vue-moment.js in Vue

I'm struggling with incorporating vue-moment or moment.js into a .vue file to work with dates. I want to be able to manipulate a date in the Vue method to calculate the timespan between a past and current time, updating it dynamically. After searching ...

Ensure props are properly sanitized in Vue 3 before utilizing them

How can I efficiently clean up props in Vue 3 before using them? I am faced with the challenge of handling props that can be either objects or stringified JSON versions of those objects. Currently, the application I'm working on tackles this issue by ...

Parent menu fails to trigger the opening of child menu upon clicking

I'm struggling to modify a Wordpress theme to enable the child menus to expand when clicking on the parent menus. Is there a way to edit this code to make that functionality work? // Implement expandable menus var expand_link = $('<a class="m ...

What are the steps to execute PhantomJS on a client machine?

I have implemented an HTML to PDF converter that utilizes phantomjs, following this method: npm install -g html-pdf var fs = require('fs'); var pdf = require('html-pdf'); var html = fs.readFileSync('./test/businesscard.html' ...

Transform array sequences into their own unique sequences

Reorder Array of List to Fit My Custom Order Current Output: [ { "key": "DG Power Output", "value": "6.00", "unit": "kWh", }, { "key": "DG Run Time", "value": "5999999952", "unit": "minutes", }, { "key": "Fuel Level (Before)", "value": "8.00" ...

"The Zorro table is filled with items of various types, although unfortunately, the Intellisense is not as accurate as it

Imagine a scenario where you have a basic table set up: <nz-table #table [nzData]="users"> <thead> <tr> <th>Id</th> <th>First Name</th> <th>Last Name</th> </tr> ...

What is the procedure for assigning an element's background-color to match its class name?

Is there a way to use jQuery to make the background color of a span element match its class? $(function() { $("span").css("background-color") }); span { display: inline-block; width: 5px; height: 5px; border: solid #0a0a0a 1px; } <script src= ...

"Utilizing TypeScript with React: Creating a window onClick event type

My linter is not happy with the any type for window.onClick. What should be the correct type? import React, { useContext, useState } from 'react'; import { Link } from 'react-router-dom'; import { Global } from '../globalState&apo ...

Generating a JavaScript array containing all elements belonging to a specific class name

As I work on my website, I am attempting to create an array from elements that have a specific class. This array should retrieve the videofile attribute value from all `a` tags with the class `videoLink`. The desired values in the final array should be: ...

Error: The specified updateTag type in the Angular SEO service is not compatible

I am in the process of developing an SEO service using Angular's Meta service (https://angular.io/api/platform-browser/Meta) Within the service, there is a method for managing social media tags that seems to be encountering issues and producing the f ...

Is it possible to retrieve server data in a JavaScript file?

EDIT: I accidentally omitted a piece of relevant code I am looking to access the "jsonData" value from my server in my JavaScript file. Can someone guide me on how to retrieve these values? Here is the server-side code: var express = require('expre ...

Why does Array Object sorting fail to handle large amounts of data in Javascript?

Encountered an issue today, not sure if it's a coding problem or a bug in Javascript. Attempting to sort an object array structured like this: const array = [{ text: 'one', count: 5 }, { text: 'two', count: 5 }, { text: 'thre ...

When the input value is changed programmatically, the onchange event does not execute as expected

Having trouble updating the content of my dataTable when using JS script to change the quantity value. Here is a snippet from my code. <h:inputText id="counterFeatures" value="#{myBean.quantity}"> <f:ajax event="change" render="myDataTable" ...

What is the best way to resize an element such as an image?

When an image is resized using a percentage, it preserves its aspect ratio properly. I am looking for a way to replicate this behavior with a div. My current challenge involves precisely positioning an element relative to an image. The image fills 100% of ...

Issues with MC-Cordova-Plugin on Ionic and Angular Setup

Recently, I integrated a plugin for Ionic from this repository: https://github.com/salesforce-marketingcloud/MC-Cordova-Plugin After successfully configuring it for iOS, I encountered difficulties on Android where the plugin seems to be non-existent. It ...

Issues arise when compiling Angular 9 with Ivy in a Docker environment

Looking to create a new Angular 9 project using a custom image based on the official node image. I want to cache the package build without caching the Angular source build. Check out my Dockerfile below: FROM node COPY package.json /mnt/ RUN c ...

The domain name or IP address does not correspond to the alternate names listed on the certificate

I am currently facing an issue with installing npm packages in my react native project. Every attempt to install a package from npm results in the error message shown below: fitz:tesseractOcrSample fitzmode$ npm i npm ERR! request to https://registry.npmj ...