What is the best way to determine which variable holds the greatest value in Angular?

Question

What is the best way to determine which variable holds the greatest value in Angular?

I am working with different array lengths stored in variables and trying to determine which variable is the greatest, then change the font color of that variable. However, I encountered an issue where if two variables have the same value, only one is being colored.

Here is my code snippet:

  calculateconfirm(location1, location2, location3, location4, type) {
    var max = Number.NEGATIVE_INFINITY;
    var max_key = undefined;
    var obj = { 'location1': location1, 'location2': location2, 'location3': location3, 'location4': location4 };
    for (var key in obj) {
      if (obj[key] > max) {
        max_key = key;
        max = obj[key];
      }
    }
    return max_key == type ? '#5D3FD3' : '#301934';

  }

HTML

  <tr *ngFor="let x of userdata">
        <td><img src="{{x.data.userImage}}" alt="" style="height: 75px; width: 75px;"></td>

        <td>{{x.data.fullName}}</td>
        <td *ngIf="x.data.location.location1 == 'false'">N/A</td>
        <td *ngIf="x.data.location.location1 != 'false'"
            [style.color]="calculateconfirm(x.data.location.like.length, x.data.location2.like.length, x.data.location3.like.length, x.data.location4.like.length, 'location1')">
            {{x.data.location.location1}}

        <td *ngIf="x.data.location2.location2 == 'false'">N/A</td>
        <td *ngIf="x.data.location2.location2 != 'false'"
            [style.color]="calculateconfirm(x.data.location.like.length, x.data.location2.like.length, x.data.location3.like.length, x.data.location4.like.length, 'location2')">
            {{x.data.location2.location2}}


        <td *ngIf="x.data.location3.location3 == 'false'">N/A</td>
        <td *ngIf="x.data.location3.location3 != 'false'"
            [style.color]="calculateconfirm(x.data.location.like.length, x.data.location2.like.length, x.data.location3.like.length, x.data.location4.like.length, 'location3')">
            {{x.data.location3.location3}}

        <td *ngIf="x.data.location4.location4 == 'false'">N/A</td>
        <td *ngIf="x.data.location4.location4 != 'false'"
            [style.color]="calculateconfirm(x.data.location.like.length, x.data.location2.like.length, x.data.location3.like.length, x.data.location4.like.length, 'location4')">
            {{x.data.location4.location4}}
        </td>

    </tr>

Let's assume we have an object like this:

var obj = { 'location1': 2, 'location2': 1, 'location3': 5, 'location4': 5 };

In this case, I want both location 3 and 5 to be colored on the HTML page.

angular typescript

Answer 1

Answer №1

To effectively manage multiple keys that have the same highest value, it is essential to update and replace existing keys when a new maximum value is discovered. Here is an enhanced version of your current function that handles this scenario:

  adjustValues(location1, location2, location3, location4, type) {
    var max = Number.NEGATIVE_INFINITY;
    // store keys in an array to accommodate multiple keys
    var max_keys = [];
    var obj = { 'location1': location1, 'location2': location2, 'location3': location3, 'location4': location4 };
    for (var key in obj) {
      if (obj[key] > max) {
        max_keys = [key];
        max = obj[key];
      } else if (obj[key] === max) {
        // add key to list in case of tie
        max_keys.push(key)
      }
    }
    // check if type matches any of the keys
    return max_keys.includes(type) ? '#5D3FD3' : '#301934';

  }

Answer 2

To effectively manage multiple keys that have the same highest value, it is essential to update and replace existing keys when a new maximum value is discovered. Here is an enhanced version of your current function that handles this scenario:

  adjustValues(location1, location2, location3, location4, type) {
    var max = Number.NEGATIVE_INFINITY;
    // store keys in an array to accommodate multiple keys
    var max_keys = [];
    var obj = { 'location1': location1, 'location2': location2, 'location3': location3, 'location4': location4 };
    for (var key in obj) {
      if (obj[key] > max) {
        max_keys = [key];
        max = obj[key];
      } else if (obj[key] === max) {
        // add key to list in case of tie
        max_keys.push(key)
      }
    }
    // check if type matches any of the keys
    return max_keys.includes(type) ? '#5D3FD3' : '#301934';

  }

Answer 3

Answer №2

To simplify the process, calculate the maximum value only once and then compare it with the known value to assign the style. Here is an example showing this approach:

export class AppComponent  {
  
  items = [
    { name: 'Item #1', value: 3 },
    { name: 'Item #2', value: 2 },
    { name: 'Item #3', value: 3 },
    { name: 'Item #4', value: 5 },
    { name: 'Item #5', value: 4 },
    { name: 'Item #6', value: 5 },
  ];

  maxValue = Math.max(...this.items.map(i => i.value));

}

<li *ngFor="let item of items" [style.color]="item.value === maxValue ? 'red' : 'black'"> 
    {{ item.name }} ({{ item.value}})
</li>

A ternary operation is used to determine the style value by comparing each item's value against the calculated maxValue.

Avoid calling functions directly from the template since they get executed every time Angular's change detection runs. This can impact performance, especially as data sets grow larger or function complexity increases.

Here is a StackBlitz sample for reference.

If you have multiple values in each row of data, you can still use the same method of calculating the max value for each row. You can add a new property named maxValue to each object in the array like so:

export class AppComponent  {
  
  private dataItems = [
    { name: 'Item #1', values: [3, 1, 2, 3] },
    { name: 'Item #2', values: [8, 2, 5, 3] },
    { name: 'Item #3', values: [3, 4, 2, 4] },
    { name: 'Item #4', values: [5, 5, 1, 9] },
    { name: 'Item #5', values: [4, 8, 1, 8] },
    { name: 'Item #6', values: [5, 1, 6, 7] },
  ];

  items = this.dataItems.map(item => ({
    name     : item.name,
    values   : item.values,
    maxValue : Math.max(...item.values)
  }));

}

<tr *ngFor="let item of items">
    <td> {{ item.name }} </td>
    <td *ngFor="let value of item.values" 
        [style.color]="value === item.maxValue ? 'red' : 'black'"
    > 
        {{ value }}
    </td>
</tr>

Refer to StackBlitz #2 for another example.

Answer 4

To simplify the process, calculate the maximum value only once and then compare it with the known value to assign the style. Here is an example showing this approach:

export class AppComponent  {
  
  items = [
    { name: 'Item #1', value: 3 },
    { name: 'Item #2', value: 2 },
    { name: 'Item #3', value: 3 },
    { name: 'Item #4', value: 5 },
    { name: 'Item #5', value: 4 },
    { name: 'Item #6', value: 5 },
  ];

  maxValue = Math.max(...this.items.map(i => i.value));

}

<li *ngFor="let item of items" [style.color]="item.value === maxValue ? 'red' : 'black'"> 
    {{ item.name }} ({{ item.value}})
</li>

A ternary operation is used to determine the style value by comparing each item's value against the calculated maxValue.

Avoid calling functions directly from the template since they get executed every time Angular's change detection runs. This can impact performance, especially as data sets grow larger or function complexity increases.

Here is a StackBlitz sample for reference.

If you have multiple values in each row of data, you can still use the same method of calculating the max value for each row. You can add a new property named maxValue to each object in the array like so:

export class AppComponent  {
  
  private dataItems = [
    { name: 'Item #1', values: [3, 1, 2, 3] },
    { name: 'Item #2', values: [8, 2, 5, 3] },
    { name: 'Item #3', values: [3, 4, 2, 4] },
    { name: 'Item #4', values: [5, 5, 1, 9] },
    { name: 'Item #5', values: [4, 8, 1, 8] },
    { name: 'Item #6', values: [5, 1, 6, 7] },
  ];

  items = this.dataItems.map(item => ({
    name     : item.name,
    values   : item.values,
    maxValue : Math.max(...item.values)
  }));

}

<tr *ngFor="let item of items">
    <td> {{ item.name }} </td>
    <td *ngFor="let value of item.values" 
        [style.color]="value === item.maxValue ? 'red' : 'black'"
    > 
        {{ value }}
    </td>
</tr>

Refer to StackBlitz #2 for another example.

What is the best way to determine which variable holds the greatest value in Angular?

Answer №1

Answer №2

Similar questions

The type 'MutableRefObject<undefined>' cannot be assigned to the type 'LegacyRef<HTMLDivElement> | undefined'

Is there any distinction between using glob wildcards in the tsconfig.json file when specifying "include" as "src" versus "include" as "src/**/*"?

What causes the HTML element's X position value to double when its X position is updated after the drag release event in Angular's CDK drag-drop feature?

Infer the types and flatten arrays within arrays

Troubleshooting CORS policy problems in an Ionic Angular application

The Typescript SyntaxError occurs when attempting to use an import statement outside of a module, typically within a separate file that contains

Angular 5 and Bootstrap card with enhanced double-click functionality

Error: The recursive list cannot access the 'length' property of an undefined value

Issue with IntelliJ: TypeScript Reference Paths Are Not Relative

The Angular Reactive Forms error message indicates that attempting to assign a 'string' type to an 'AbstractControl' parameter is invalid

What is the proper way to specify the type for a <video> element reference in React when utilizing Typescript?

Issue: "Exported functions in a 'use server' file must be async"

Guide on showing a component exclusively for iPads with React and TypeScript

Enhancing Angular2 authentication with Auth0 for enabling Cross-Origin Resource Sharing

Collection of personalized forms where the parent is a FormGroup

Is it possible to define a data type from an external package using TypeScript and Node.js?

Setting up admin credentials with TypeScript in Firebase cloud functions

The Angular component fails to retrieve data from a subscribed service when the data is being fetched from the sessionStorage

Exploring Child Types in Typescript and JSX minus the React framework

Angular 6 - The state of the expression was altered after it was verified, different types of constructions