Angular2 *ngIf check object array length in template

Question

Refered to https://angular.io/docs/ts/latest/guide/displaying-data.html and stack How to check empty object in angular 2 template using *ngIf still getting syntax error self context undefined. If I remove *ngIf condition then I am getting values in teamMembers if I push some value into it so I can access values in teamMembers.

my teamMember object is [ ] array i am trying to check condition array is empty by size.

Tries :

<div class="row" *ngIf="(teamMembers | json) != '{}'">

and

<div class="row" *ngIf="teamMembers.length > 0"> //Check length great than
                                                 throwing syntax error
            <div class="col-md-12">
                <h4>Team Members</h4>
                <ul class="avatar" *ngFor="let member of teamMembers">
                    <li><a href=""><gravatar-image [size]="80" [email]="member.email"></gravatar-image></a></li>
                </ul>
            </div>
        </div>

Component :

@Component({
selector: 'pbi-editor',
})
export class AppComponent implements OnInit {
teamMembers: User[];

Any help would be great.

ORIGINAL EXCEPTION: TypeError: self.context.teamMembers is not a function for *ngIf="teamMembers.length > 0" i will try with below answer 1 min pls — Karthigeyan Vellasamy
– Karthigeyan Vellasamy, Commented May 31, 2016 at 10:51

Günter Zöchbauer · Accepted Answer · 2017-01-27 15:49:57Z

327

<div class="row" *ngIf="teamMembers?.length > 0">

This checks first if teamMembers has a value and if teamMembers doesn't have a value, it doesn't try to access length of undefined because the first part of the condition already fails.

edited Jan 27, 2017 at 15:49

answered May 31, 2016 at 10:48

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael W. Czechowski Over a year ago

Here is the correct link to the safe navigation operator: angular.io/guide/template-syntax#safe-navigation-operator

krish Over a year ago

This may throw Operator '>' cannot be applied to types 'boolean' and 'number'. while optimizing build with --aot or prod

Günter Zöchbauer · Accepted Answer · 2016-05-31 10:45:09Z

20

You could use *ngIf="teamMembers != 0" to check whether data is present

edited May 31, 2016 at 10:45

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

answered May 31, 2016 at 10:41

AishApp

4,1622 gold badges32 silver badges33 bronze badges

Comments

Druta Ruslan · Accepted Answer · 2019-03-15 07:39:14Z

9

You can use

<div class="col-sm-12" *ngIf="event.attendees?.length">

Without event.attendees?.length > 0 or even event.attendees?length != 0

Because ?.length already return boolean value.

If in array will be something it will display it else not.

answered Mar 15, 2019 at 7:39

Druta Ruslan

7,4122 gold badges31 silver badges40 bronze badges

Comments

alexKhymenko · Accepted Answer · 2018-10-18 20:09:43Z

4

Maybe slight overkill but created library ngx-if-empty-or-has-items it checks if an object, set, map or array is not empty. Maybe it will help somebody. It has the same functionality as ngIf (then, else and 'as' syntax is supported).

arrayOrObjWithData = ['1'] || {id: 1}

<h1 *ngxIfNotEmpty="arrayOrObjWithData">
  You will see it
</h1>

 or 
 // store the result of async pipe in variable
 <h1 *ngxIfNotEmpty="arrayOrObjWithData$ | async as obj">
  {{obj.id}}
</h1>

 or

noData = [] || {}
<h1 *ngxIfHasItems="noData">
   You will NOT see it
</h1>

answered Oct 18, 2018 at 20:09

alexKhymenko

5,64826 silver badges40 bronze badges

Comments

Mitchell Matula · Accepted Answer · 2017-02-16 14:50:27Z

-1

This article helped me alot figuring out why it wasn't working for me either. It give me a lesson to think of the webpage loading and how angular 2 interacts as a timeline and not just the point in time i'm thinking of. I didn't see anyone else mention this point, so I will...

The reason the *ngIf is needed because it will try to check the length of that variable before the rest of the OnInit stuff happens, and throw the "length undefined" error. So thats why you add the ? because it won't exist yet, but it will soon.

answered Feb 16, 2017 at 14:50

Mitchell Matula

354 bronze badges

Collectives™ on Stack Overflow

Angular2 *ngIf check object array length in template

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related