i have implemented a function which determines comment based on the result number pushed to array and shows it in a table.

since calling function in template is slowing down performance, how can I get the same result of now without calling the comment() function in html??

Here is stackblitz

to use the dropdown just click in the input and type either F to get fahrenheit or C to get celsius.

Basically its saving result to localStorage and pushing new result to array (history calculations)

this is the function which i dont like calling in html but cant figure out how to implement it differently inside the component

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

CodePudding user response：

Add a custom 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.';
    }
  }

}

Use it like this:

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