ngif comparing two arrays

Question

I have two arrays in my component

arr1 = ["one", "two"]
arr2 = ["one", "two"]

In my html I am using my ngIf like this

*ngIf="!isEnabled && arr1 != arr2"

The isEnabled works fine but when comparing the two arrays it always shows that they are not equal even though they are set to be equal at the start.

The arr1 will change based on a service but I confirmed the service is changing the array already

if your arrays didn't contain complex object, just convert to json.stringify and compare — phonemyatt, Dec 20 '18 at 17:20
Here're some ways you can use to compare arrays: https://stackoverflow.com/questions/7837456/how-to-compare-arrays-in-javascript — Aragorn, Dec 20 '18 at 17:22
The problem is that two arrays are always different (an array is a "memory position"). You need compare if each element are eauqls. You can use *ngIf="arr1.join()!=arr2.join()" ( * )join concatenate the values of an array and return a string — Eliseo, Dec 20 '18 at 17:23

score 3 · Answer 1 · answered Dec 20 '18 at 17:18

You actually cannot do this way, Instead of doing this comparision in template you should have a function that would return boolean value after comparing and then bind that to the template

*ngIf="!isEnabled && compareArrays()"

and

compareArrays(){
let result = array1.length == array2.length && 
    array1.every(function(element, index) {
    return element === array2[index]; 
});
return result;
}

Aragorn · Answer 2 · 2018-12-20T18:18:54.637

just using != will always result in true because they are different objects, so never equal.

Unless they are two references to same array. Such as:

realArray = ['stuff'];

arr1 = realArray;
arr2 = realArray;

Assuming your arrays are two different objects, here're some ways you can use to compare arrays: How to compare arrays in JavaScript? ...

You are best to do it at the component in a function say compareArrays() and get a boolean response

*ngIf="!isEnabled && compareArrays()"

ngif comparing two arrays

2 Answers2