*ngIf value exists in array

Question

I have a question regarding the ngIf directive.

I have some angular material toggles in my application that are being generated dynamically, all of them have a specific id. I was wondering, I know that using the ngIf directive I can conditionally show those elements on my page. I am using ngIf for other functions but I am a bit lost on how I might be able to check if the id of the element exists in an array.

The array looks something like this:

["fc-vis", "fc-bis", "fc-dis"]

and my toggles all have the id: fc-vis / fc-bis ... and so on.

I've tried using ngIf but I don't know how to send the id of the element in the condition... Or I might be doing something wrong

What I am trying to do is something like :

*ngIf="object.id in myArrayList" 

or

*ngIf="checkIfExists(object.id)"

Any idea on how I could use the object's id in the condition, to check that it exists in that array ?

Answer 1

You can also use Array indexOf() method, it returns -1 if the element is not there in the array:
in your ts -
const myArray = ["fc-vis", "fc-bis", "fc-dis"]
in template -
*ngIf="myArray.indexOf(object.id) > -1"
use templateRef to get the id of the element, example:

<div id="fc-vis" #myId>
  <p *ngIf="myArray.indexOf(myId?.id) > -1">{{myId.id}} working </p> 
</div>

Answer 2

If you support modern browsers, then you can use Array includes() method here like:

*ngIf="myArrayList.includes(object.id)" 

• The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate. Thus there will be no need to do additional checks here after calling this method.

For supporting IE as well, you can use Array indexOf() method here like:

*ngIf="myArrayList.indexOf(object.id) > -1" 

• The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present. Thus after calling this method we will also need to do an additional check to see if the value returned from indexOf() method is greater than -1 or not and based on that *ngIf will show or hide the element.