Utilizing ternary operators in Angular 6 tables

I need to dynamically display certain amounts based on the comparison of two interest values. Here is the logic:

<td *ngIf="subTable.flexitaxMaxPaymentDate">
                subTable.flexitaxMaxInterest > subTable.IRDInterest ? {{subTable.maxAmountWithTmnzInterest | formatNegativeNumber}} ({{subTable.flexitaxMaxInterest | formatNegativeNumber}}) : ''
              </td>

Basically, if flexitaxMaxInterest is higher than IRDInterest, I want to show 

{{subTable.maxAmountWithTmnzInterest | formatNegativeNumber}} ({{subTable.flexitaxMaxInterest | formatNegativeNumber}})
inside the <td>. If the condition is false, I want to display an empty string.

The problem I'm facing is that when the table is rendered, it shows:

subTable.flexitaxMaxInterest > subTable.IRDInterest ? $926 ($26) : ''

which is not the desired output. I've tried different approaches but haven't been successful. Can anyone suggest the best way to achieve what I'm looking for?

angulartypescript

Answer №1

If you encounter a situation where you need to conditionally display content, consider using the <ng-container> element as shown in the Angular documentation

<div *ngIf="condition">
   <ng-container *ngIf="subTable.flexitaxMaxInterest > subTable.IRDInterest">
      {{subTable.maxAmountWithTmnzInterest | formatNegativeNumber}}
      ({{subTable.flexitaxMaxInterest | formatNegativeNumber}})
   </ng-container>
</div>

Answer №2

Attach the Math.max function to your component: 

assignMax = Math.max;

You are now able to utilize 

<td>
  {{ assignMax(subTable.flexitaxMaxInterest, subTable.IRDInterest) | formatNegativeNumber }}
</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

Issue with the exported elements known as 'StatSyncFn'

My build is showing an error that I'm unable to identify the source or reason for. The error message looks like this... Error: node_modules/webpack-dev-middleware/types/index.d.ts:204:27 - error TS2694: Namespace '"fs"' has no expo ...

angularwebpackangular13

Sharing Angular classes and components between a shell and Micro Frontends using module federation

Currently, I am experimenting with a module federation proof of concept in Angular, taking inspiration from Manfred's example. My goal is to figure out a way to share utility classes, directives, individual components, and any other code that does not ...

angularmicro-frontendwebpack-module-federation

Bringing in the MVC model class for an ASP.NET Core MVC application paired with an Angular 2 application

Currently, I am developing a sample Angular 2 application alongside ASP.NET Core MVC. I am curious if it is feasible to import a model class (let's say product.cs) that has been created in the "Models" folder directly into the Angular 2 application i ...

angularasp.net-web-apiasp.net-core-mvc

Effectively managing intricate and nested JSON objects within Angular's API service

As I work on creating an API service for a carwash, I am faced with the challenge of handling a large and complex json object (referred to as the Carwash object). Each property within this object is essentially another object that consists of a mix of simp ...

angulartypescriptnestedrxjs

Angular8 is displeased with the unexpected appearance of only one argument when it was clearly expecting two

Even though I have declared all my requirements statically in my component.html file, why am I receiving an error stating "Expected 2 arguments but got 1"? I use static concepts, so it's confusing to encounter this type of error. Below you can see th ...

angular

Tips for improving the performance of your Ionic 2 app

Recently, I've been working on enhancing the performance of my Ionic 2 App, particularly focusing on optimizing page loading speed. After closely analyzing the timeline of page transitions using Chrome Dev Tools, it became evident that the bottleneck ...

angularionic-frameworkionic2

Navigate to the logout page upon encountering an error during the request

I recently upgraded our application from angular 2 to angular 5 and also made the switch from the deprecated Http module to the new HttpClient. In the previous version of the application, I used the Http-Client to redirect to a specific page in case of er ...

angulartypescriptangular5

Issue with sending functions to other components in Angular

I'm currently facing an issue with passing functions to other objects in Angular. Specifically, I've developed a function generateTile(coords) that fills a tile to be used by leaflet. This function is located within a method in the MapComponent. ...

javascriptangularleaflet

Transforming a JavaScript component based on classes into a TypeScript component by employing dynamic prop destructuring

My current setup involves a class based component that looks like this class ArInput extends React.Component { render() { const { shadowless, success, error } = this.props; const inputStyles = [ styles.input, !shadowless && s ...

javascriptreactjstypescriptreact-nativematerial-ui

Strange problem encountered when transferring data to and from API using Typescript and Prisma

I'm encountering a strange issue that I can't quite pinpoint. It could be related to mysql, prisma, typescript, or nextjs. I created the following model to display all product categories and add them to the database. Prisma Model: model Product ...

mysqltypescriptnext.jsprisma

Solving issues with malfunctioning Angular Materials

I'm facing an issue with using angular materials in my angular application. No matter what I try, they just don't seem to work. After researching the problem online, I came across many similar cases where the solution was to "import the ...

htmlcssangulartypescript

The useState variable remains unchanged even after being updated in useEffect due to the event

Currently, I am facing an issue in updating a stateful variable cameraPosition using TypeScript, React, and Babylon.js. Below is the code snippet: const camera = scene?.cameras[0]; const prevPositionRef = useRef<Nullable<Vector3>>(null); ...

reactjstypescriptbabylonjs

Is there a specific instance where it would be more appropriate to utilize the styled API for styling as opposed to the sx prop in Material-

I am currently in the process of migrating an existing codebase to Material UI and am working towards establishing a styling standard for our components moving forward. In a previous project, all components were styled using the sx prop without encounteri ...

reactjstypescriptmaterial-uistyled-components

Steps to incorporate padding to a nested Angular Component by leveraging the CSS of its parent component

It is evident from the example at https://material.angular.io/components/expansion/examples that material components can be customized using the CSS of the component embedding them: .example-headers-align .mat-form-field + .mat-form-field { margin-left: ...

cssangular

How to trigger a function in a separate component (Comp2) from the HTML of Comp1 using Angular 2

--- Component 1--------------- <div> <li><a href="#" (click)="getFactsCount()"> Instance 2 </a></li> However, the getFactsCount() function is located in another component. I am considering utilizing @output/emitter or some o ...

javascriptangulartypescriptangularjs-directive

Retrieving attributes by their names using dots in HTML

Currently working on an Angular 2 website, I am faced with the challenge of displaying data from an object retrieved from the backend. The structure of the object is as follows: { version: 3.0.0, gauges:{ jvm.memory.total.used:{ value: 3546546 }}} The is ...

javascripttypescriptangular

Encountered an error while trying to access a property that is undefined - attempting to call

In my TypeScript class, I have a method that retrieves a list of organizations and their roles. The method looks like this: getOrgList(oo: fhir.Organization) { var olist: orgRoles[] = []; var filtered = oo.extension.filter(this.getRoleExt); f ...

typescriptthis

Function useAppDispatch is missing a return type

.eslintrc.js module.exports = { root: true, extends: [ '@react-native-community', 'standard-with-typescript', 'plugin:@typescript-eslint/recommended', 'plugin:jest/recommended', 'plugin:p ...

javascriptreactjstypescriptreact-reduxredux-toolkit

Exploring the concepts of Indigenous Unity within Angular 17

Currently, I am handling a project in Angular 17 that implements the micro frontend concept, specifically utilizing Native Federation. I have followed the instructions provided on the official website, and everything is functioning correctly. However, I am ...

angularmicro-frontendwebpack-module-federation

Understanding and parsing JSON with object pointers

Is it possible to deserialize a JSON in typescript that contains references to objects already existing within it? For instance, consider a scenario where there is a grandparent "Papa" connected to two parents "Dad" and "Mom", who have two children togeth ...

jsontypescriptreference