Angular 7 - collection of objects if any item has a property true

Question

How can I run an *ngIf on a collection if there is any item in collection that has a property true?

var data ={
  Collection: [
     {Flag : true },
     {Flag : true },
     {Flag : true },
     {Flag : false }
  ]
}

how can I do *ngIf="data.Collection.ANY(Flag == true)"

https://stackoverflow.com/questions/17117712/how-to-know-if-all-javascript-object-values-are-true — Chellappan வ, Dec 28 '18 at 13:30
Possible duplicate of [How to know if all javascript object values are true?](https://stackoverflow.com/questions/17117712/how-to-know-if-all-javascript-object-values-are-true) — Alex, Feb 22 '19 at 12:41

score 2 · Answer 1 · edited Dec 28 '18 at 13:59

2

You can conveniently use js some() here as follows -

<div *ngIf="data.Collection.some(x=>x.Flag)"></div>

Here's a working example for some() -

var data ={
  Collection: [
     {Flag : true },
     {Flag : true },
     {Flag : true },
     {Flag : false }
  ]
}

// you may use it this way too - x => x.Flag == true
console.log(data.Collection.some(x => x.Flag));

edited Dec 28 '18 at 13:59

Tushar Walzade

3,737
4
33
56

answered Dec 28 '18 at 13:39

Saeb Panahifar

479
1
5
11

I get this error: Bindings cannot contain assignments at column – user2818430 Dec 28 '18 at 13:43
If you get that error, [this SO answer](https://stackoverflow.com/a/43118484/1331040) might help you along with this answer – Harun Yilmaz Dec 28 '18 at 13:45

score 0 · Answer 2 · answered Dec 28 '18 at 13:30

0

<div *ngIf="data.Collection.filter(x=>x.Flag).length"></div>

if you want to handle undefined also

 <div *ngIf="data.Collection&&data.Collection.filter(x=>x.Flag).length"></div>

answered Dec 28 '18 at 13:30

RamiReddy P

1,628
1
18
29

I get this error: Bindings cannot contain assignments at column – user2818430 Dec 28 '18 at 13:43

score 0 · Answer 3 · answered Dec 28 '18 at 13:38

0

This should work:

*ngIf="data.Collection.reduce((a, b) => a || b.Flag, true)"

answered Dec 28 '18 at 13:38

dquijada

1,697
3
14
19

score 0 · Answer 4 · answered Dec 28 '18 at 15:00

0

Write a function as bellow in your component

public hasFlag(): boolean {
  return this.data.collection && this.data.collection.some(item => item. Flag);
}

Now call to that function

*ngIf="hasFlag()"

Hope you won't get the binding error

answered Dec 28 '18 at 15:00

Ajantha Bandara

1,473
15
36

Angular 7 - collection of objects if any item has a property true

4 Answers4