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      lt div class  row   ngIf   teamMembers   json           gt    and   lt div class  row   ngIf  teamMembers length  gt  0  gt    Check length great than                                                  throwing syntax error              lt div class  col-md-12  gt                   lt h4 gt Team Members lt  h4 gt                   lt ul class  avatar   ngFor  let member of teamMembers  gt                       lt li gt  lt a href    gt  lt gravatar-image  size   80   email   member email  gt  lt  gravatar-image gt  lt  a gt  lt  li gt                   lt  ul gt               lt  div gt           lt  div gt    Component     Component   selector   pbi-editor      export class AppComponent implements OnInit   teamMembers  User      Any help would be great

User · Answer

You can use   lt div class  col-sm-12   ngIf  event attendees  length  gt    Without event attendees  length  gt  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

User · Answer

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

User · Answer

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    lt h1  ngxIfNotEmpty  arrayOrObjWithData  gt    You will see it  lt  h1 gt    or      store the result of async pipe in variable   lt h1  ngxIfNotEmpty  arrayOrObjWithData    async as obj  gt      obj id    lt  h1 gt    or  noData             lt h1  ngxIfHasItems  noData  gt     You will NOT see it  lt  h1 gt

User · Answer

You could use   ngIf  teamMembers    0  to check whether data is present

User · Answer

lt div class  row   ngIf  teamMembers  length  gt  0  gt    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

[angular] Angular2 *ngIf check object array length in template

Examples related to angular

Examples related to angular2-template