CODEWITHSUNDEEP
htmlangulartypescript
Lipsky
Lipsky

Reputation: 77

NgIf all objects in an array match a condition

So I have a structure like so:

{
    documentGroup: {
        Id: 000
        Children: [
            {
                Id: 000
                Status: 1
            },
            {
                Id: 000
                Status: 2
            },...
        ]
    },
},

Is there a way to write an ngIf statement to check if all Children elements have Status == 1?

EDIT: When I try this

documentGroup.children.every(({status}) => status === 1)

I get the error:

Parser Error: Missing expected ) at column 41 in [documentGroup.children.every(({status}) => status === 1)

Upvotes: 0

Views: 1004

Answers (2)

Ovidijus Parsiunas
Ovidijus Parsiunas

Reputation: 2732

You will need add a new function into your component's .ts file which would do the check for you and you can then reference it in the template as follows (documentsObj is the object that contains the object in your example):

.ts:

isAllStatusOne(): boolean {
    return this.documentsObj.documentGroup.Children.every(({Status}) => Status === 1);
}

.html:

*ngIf="isAllStatusOne()"

The above code should trigger change detection at the start and any time a property value changes in the documentsObj object which should then proceed to check if all Children have a Status property that is 1. If they all are 1 - every should return true and the nested elements/components should be rendered.

Alternatively you can use find which when using with Status !== 1 condition would return undefined when all Status properties are 1, hence coupled with ! at the start it will result in true:

isAllStatusOne(): boolean {
    return !this.documentsObj.documentGroup.Children.find(({Status}) => Status !== 1);
}

Upvotes: 1

constantine-d
constantine-d

Reputation: 41

you could also make use of an angular pipe, to check the status and return something else instead (in your case, you could check the status and return true or false). Transforming Data Using Pipes

Upvotes: 1

Related Questions