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

Customizing the renderInput of the Material UI DatePicker

Recently I integrated material-ui into my React project with TypeScript. I implemented the following code based on the example provided on the official website. import AdapterDateFns from '@mui/lab/AdapterDateFns'; import DatePicker from '@m ...

javascriptreactjstypescriptmaterial-uidatepicker

Error Encountered: Anticipated 'styles' to consist of a series of string elements

I have attempted various solutions for this particular error message without any success. When launching my angular project using the angular cli via ng serve, everything runs smoothly with no errors. However, upon compiling it with webpack, I encounter th ...

cssangularwebpack

Is it possible for an Angular App to function as an authenticated user for a real-time database?

Just a question, no code included. I want to restrict access to reading from RTDB only to authenticated users. However, I don't want every user to have to sign up individually. Instead, I would like to have one login tied to the angular app that auto ...

angularfirebasefirebase-realtime-databasefirebase-authentication

"Implementing a retry feature for Angular http requests triggered by a button

Imagine having a situation where a component has a method that triggers an http request defined in a service. The observable is subscribed to within the component: Component: fetchData() { this.apiService.fetchDataFromServer().subscribe( respo ...

angulartypescriptrxjsangular-httpclient

Creating Dynamic Forms in React with Typescript: A Step-by-Step Guide to Adding Form Elements with an onClick Event Handler

I am looking to create a dynamic generation of TextFields and then store their values in an array within the state. Here are my imports: import TextField from '@material-ui/core/TextField'; import Button from '@material-ui/core/Button&apos ...

reactjstypescriptmaterial-ui

Transform the JSON object into a TypeScript array

Currently working on a project that requires converting a JSON object into a TypeScript array. The structure of the JSON is as follows: { "uiMessages" : { "ui.downtime.search.title" : "Search Message", "ui.user.editroles.sodviolation.entries" : ...

javascriptjsontypescript

Is there a way to conduct testing on code within an Angular subscribe block without risking values being overwritten in the following subscribe blocks?

In my Angular application, I am using ngx-socket-io and have a component with several .subscribe blocks inside ngOnInit() that are triggered when data is received from the server. The issue arises when testing the component, as calling ngOnInit() in the t ...

angulartestingjestjsngx-socket-io

What is the easiest way to compile a single .ts file in my src folder? I can achieve this by configuring the tsconfig.js file and running the yarn

{ "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, ...

reactjstypescripttsconfig

How do I disable split panel on Ionic 2 login page exclusively?

I have successfully implemented the split-pane feature in my app.html file. However, I am facing an issue where the split pane is being applied to every page such as login and SignUp. Can someone please guide me on how to restrict the split pane function ...

angulartypescriptionic2

The type 'Bar<T>' cannot be assigned to type 'T extends number ? number | Bar<T> : Bar<T>'

I'm struggling with this particular code snippet: class Foo<T> { x?: T extends string ? string | Foo<T> : Foo<T> } function bar<T>(): Foo<T> { const x: Foo<T> = { } return { x } } Can anyone explain why the ...

typescripttypescript-generics

Having Trouble Retrieving Data from Observable in Angular 2 and Typescript

I've encountered a promise error when trying to access a variable that receives data from an observable. Here's an example: Within my component, I have defined the Stat class: export class Stats { name: string; percentage: number; constru ...

angularhttptypescriptrxjs

Transforming JSON data into an Angular TypeScript object

Delving into the realm of Angular on my own has been quite an enlightening journey, but I'm currently facing a specific issue: My aim is to create a website using both Spring for the back end and Angular 7 for the front end. However, I've encoun ...

jsonangulartypescriptrxjssingle-page-application

Components in Ionic used in app.component.ts and various pages

Struggling with integrating a custom component in Ionic. In my app.html, I have a menu and I'm using lazy-loading for the pages. I am trying to include the component in both the menu in app.html and on some pages. However, I'm facing an issue ...

angularionic-frameworkionic3

Error: Unable to modify a property that is marked as read-only on object '#<Object>' in Redux Toolkit slice for Firebase Storage in React Native

Hey there! I've been working on setting my downloadUrl after uploading to firebase storage using Redux Toolkit, but I'm facing some challenges. While I have a workaround, I'd prefer to do it the right way. Unfortunately, I can't seem to ...

javascriptreactjstypescriptfirebaseredux-toolkit

Firing an Event with a specific target value using Jasmine

Is there a way to trigger a change event in a Jasmine unit test with the inclusion of a target.value? The component being tested contains a method similar to this: @HostListener('change', ['$event']) onChange(event) { const value = e ...

angularjasmine

What is the process of declaring a method within a subclass and then retrieving it from a method within the parent class using Typescript?

I am currently working with this TypeScript code snippet: abstract class Base { static actions:Record<string,unknown> static getActions () { return this.actions } } class Sub extends Base { static actions = { bar:(bar:string ...

typescriptclassvisual-studio-codeinheritanceintellisense

What are the steps for incorporating the AAD B2C functionality into an Angular2 application with TypeScript?

I recently built a web application using Angular2 and TypeScript, but now one of my clients wants to integrate Azure B2C for customer login instead of OAuth. I followed a simple example on how to implement Azure B2C in a .NET Web app through the link provi ...

angularazuretypescriptazure-ad-b2c

Is the Angular Karma test failing to update the class properties with the method?

I am struggling to comprehend why my test is not passing. Snapshot of the Class: export class Viewer implements OnChanges { // ... selectedTimePeriod: number; timePeriods = [20, 30, 40]; constructor( /* ... */) { this.selectLa ...

javascriptangulartypescriptunit-testingkarma-jasmine

Tips for Verifying a User's Identity using Username and Password

After examining this Angular 2 solution: state: string = ''; error: any; constructor(public af: AngularFire, private router: Router) { this.af.auth.subscribe(auth => { if (auth) { this.router.navigateByUrl('/mem ...

angularangularfire2

Adding Relative URLs Automatically to .angular-cli.json is a simple process that can be easily

Is there a way to automatically have Angular-Cli (Angular-4) append URL's to Styles or Scripts when adding external libraries with npm install --save into .angular-cli.json? Currently, we have to manually search through the node_modules folder to fin ...

angulartypescriptnpm