Angular - displaying text based on comparing with array values in template

vamsi

I have two arrays in my .ts file which were formed based on specific condition matching

this.successIds = [1234, 2345, 3456];
this.failIds = [123, 234, 345];

In my HTML file, I have a grid column where I need to compare it's Id in each row with above Ids from the arrays and show the respective text

  <kendo-grid-column *ngIf="isEditClicked" field="status" title="STATUS" width="70">        
    <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column">         
      <span *ngIf="dataItem.attributeId == <if found in successIds array>">Success </span>
      <span *ngIf="dataItem.attributeId == <if found in failIds array>">Fail </span>
    </ng-template>        
  </kendo-grid-column>

How can I do this comparison in the template and show the respective message. Please suggest. Thanks.

Philipp Meissner

You have a few options on how to tackle this. Your best bet would be to use Set (last example).

Option 1 (slow)

<kendo-grid-column *ngIf="isEditClicked" field="status" title="STATUS" width="70">
  <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column">
    <span *ngIf="isInSuccess(dataItem.attributeId)">Success </span>
    <span *ngIf="isInFail(dataItem.attributeId)">Fail </span>
  </ng-template>
</kendo-grid-column>


class YourComponent {
  successIds = [1234, 2345, 3456];
  failIds = [123, 234, 345];
  
  isInSuccess(value: number): boolean {
    return this.successIds.includes(value);
  }
  
  isInFail(value: number): boolean {
    return this.failIds.includes(value);
  }
}

Option 2 (faster)

The following will be a lot better in terms of performance:

class Foobar {
  // successIds = [1234, 2345, 3456];
  // failIds = [123, 234, 345];

  // Lookup-object that stores the id as key and `true` (=success) or `false` (=failed) as value.
  idMap = {
    1234: true,
    2345: true,
    3456: true,

    123: false,
    234: false,
    345: false,
  }
  
  isInSuccess(value: number): boolean {
    return this.idMap[value] === true;
  }
  
  isInFail(value: number): boolean {
    return this.idMap[value] === false;
  }
  
  addToSuccess(value) {
    // used to be
    // this.successIds.push(value);
    
    // now becomes
    this.idMap[value] = true;
  }
  
  addToFail(value) {
    // used to be
    // this.failIds.push(value);
    
    // now becomes
    this.idMap[value] = false;
  }
}

I also added an example on how I guess you pushed the elements into the respective array and how to do that using an object instead.

Option 3 (fastest + modern)

class Foobar {
  successIds = new Set([1234, 2345, 3456]);
  failIds = new Set([123, 234, 345]);

  isInSuccess(value: number): boolean {
    return this.successIds.has(value);
  }

  isInFail(value: number): boolean {
    return this.failIds.has(value);
  }

  addToSuccess(value: number) {
    this.successIds.add(value);
  }

  addToFail(value: number) {
    this.failIds.add(value);
  }
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Displaying string based on array variable in a Smarty template

Comparing values in django template

How to remove the particular array key values by comparing with the other array in angular

Angular MatTableDataSource filter by comparing nested array of values to array from multiselect

Popover not displaying in angular template

Data is not displaying on template (Angular)

Cannot loop through array comparing text values, undefined result with Protractor

Displaying array values based on a certain condition in a blade - Laravel

angular comparing two array values using ngIf else to show button

Comparing angular value with text

Django - Comparing datetime values in template

comparing index values in an array

multidimensional array, comparing the values

Comparing and displaying the values in the same table in sqlplus

Basic displaying array values?

Angular 5 - Data not displaying in template

angular typescript component not displaying the template

Angular 8 not displaying array

Selection and displaying values based on condition

Displaying text based on what day it is

Trying to populate array with string values based on filter selections, and filter records by comparing the array to string value of record attribute

Select list not displaying values and text

Angular number array store values as text

Comparing values in Custom Validator in Angular

Comparing n values in a single array

Comparing row values with table array

Comparing values in json object array

comparing values of array and fill dropdown

Comparing array values with each other