Update each number in an array by appending a string within a table in an Angular component, rather than the

Question

Update each number in an array by appending a string within a table in an Angular component, rather than the

I have created a function that decides on a comment based on the result number added to an array and displays it in a table.

However, calling this function within the template is causing a performance slowdown. Is there a way to achieve the same outcome without directly calling the comment() function in the HTML code?

Here is the StackBlitz project

To use the dropdown, simply click inside the input field and type either "F" for Fahrenheit or "C" for Celsius.

The process involves saving the results to the Local Storage and adding new results to an array (history of calculations).

Even though I dislike calling this function directly in the HTML, I am struggling to find an alternative implementation within the component itself.

        <td>{{ comment(history.result, history.temperatureUnit === 'C') }}</td>

javascript angular typescript

Answer 1

Answer №1

Create a personalized pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'commentResolver'
})
export class CommentResolverPipe implements PipeTransform {

  transform(temperature: number, isCelsius: boolean): string {
    if (isCelsius) {
      temperature = (temperature * 9) / 5 + 32;
    }
    
    if (temperature >= 75 && temperature <= 90) {
      return 'Caution: fatigue is possible with prolonged exposure and activity. Continuing activity could result in heat cramps.';
    } else if (temperature > 90 && temperature <= 105) {
      return 'Extreme caution: heat cramps and heat exhaustion are possible. Continuing activity could result in heat stroke.';
    } else if (temperature > 105 && temperature <= 130) {
      return 'Danger: heat cramps and heat exhaustion are likely; heat stroke is probable with continued activity.';
    } else {
      return 'Extreme danger: heat stroke is imminent.';
    }
  }

}

Implement it as follows:

<td>{{ history.result | commentResolver: history.temperatureUnit === 'C' }}</td>

Access Stackblitz example here

Answer 2

Create a personalized pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'commentResolver'
})
export class CommentResolverPipe implements PipeTransform {

  transform(temperature: number, isCelsius: boolean): string {
    if (isCelsius) {
      temperature = (temperature * 9) / 5 + 32;
    }
    
    if (temperature >= 75 && temperature <= 90) {
      return 'Caution: fatigue is possible with prolonged exposure and activity. Continuing activity could result in heat cramps.';
    } else if (temperature > 90 && temperature <= 105) {
      return 'Extreme caution: heat cramps and heat exhaustion are possible. Continuing activity could result in heat stroke.';
    } else if (temperature > 105 && temperature <= 130) {
      return 'Danger: heat cramps and heat exhaustion are likely; heat stroke is probable with continued activity.';
    } else {
      return 'Extreme danger: heat stroke is imminent.';
    }
  }

}

Implement it as follows:

<td>{{ history.result | commentResolver: history.temperatureUnit === 'C' }}</td>

Access Stackblitz example here

Update each number in an array by appending a string within a table in an Angular component, rather than the

Answer №1

Similar questions

Is there a way to send my form data to a different URL once it has been submitted?

Ensuring the safety of ajax GET/POST communication between client and server

Discovering the following solution in JavaScript

Is there a way to make an HTML link target the same as JavaScript window.opener?

Getting the search bar's result set and simultaneously wiping out the existing data

Despite my usage of className, I still encounter the error message "Error: Invalid DOM property `class`."

Looking for guidance on integrating cookies with express session? Keep in mind that connect.sid is expected to be phased out

Why does routing function correctly in a browser with AngularUI Router and Ionic, but not in Ionic View?

Preserving the button's state when clicked

The prop observation was activated without any alterations

Error in Ionic2 TypeScript: 'google' and '$' names not found, despite Google Maps and jQuery functioning correctly

Encountering a blank webpage displaying a warning that reads, "The use of 'event.returnValue' is outdated

Change the color of the Parent Menu when a childMenu is clicked on using CSS and HTML

Trigger oncopy on the body excluding specific class

What is the best way to save only the time in MySQL using Sequelize?

How to smoothly fade out content when hovering over a menu item in HTML<li> tags

Setting the button value to a textbox and refreshing the status information (Codeigniter)

Currently using Mongoose and Luxon to showcase the event date, however, I am encountering an issue where the displayed date is one day earlier than expected

Troubleshooting: Mongoose Array Object Order Modification Issue

The functionality of Angular router is disrupted when guards yield an Observable as their return value