CODEWITHSUNDEEP
javascriptangulartypescript
Vlad N
Vlad N

Reputation: 651

*ngIf value exists in array

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 ?

Upvotes: 27

Views: 60363

Answers (3)

O-9
O-9

Reputation: 1769

The answers are good, but I faced an issue with strict template checking (or at least I think so)

I'm making a generic Advanced Search dialog component, where some of the fields must be hidden if certain field is selected - ie. boolean field, so I want to hide ">=" comparison selection. What I had was a function that gets the type of the field like this

getFieldType(criterion) === searchTypes.typeBoolean

So I wanted to refactor the logic to support more data types and that's why I came here. The problem is that - in my case - getFieldType(AbstractControl) can return undefined and neither of the answers (includes() or indexOf()) worked for me when typing (also tried .includes()):

*ngIf="[searchTypes.typeString, searchTypes.typeBoolean].indexOf(getFieldType(cr)) !== -1">

It doesn't work because both includes() and indexOf() expects the param type to be same as the types in the array(!)

In my case I solved it by casting the entire form in a ng-container, this way it won't render the html if the method ever returns undefined

<ng-container *ngIf="getFieldType(cr) as fieldType">

Upvotes: 0

palaѕн
palaѕн

Reputation: 73896

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.

Upvotes: 37

Avinash
Avinash

Reputation: 1243

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>

Upvotes: 8

Related Questions