ngIf and ngFor on same element causing error

Question

I m having a problem with trying to use Angular s  ngFor and  ngIf on the same element    When trying to loop through the collection in the  ngFor  the collection is seen as null and consequently fails when trying to access its properties in the template    Component     selector   shell     template         lt h3 gt Shell lt  h3 gt  lt button  click   toggle    gt Toggle  lt  button gt        lt div  ngIf  show   ngFor  let thing of stuff  gt          log thing           lt span gt   thing name   lt  span gt       lt  div gt          export class ShellComponent implements OnInit      public stuff any           public show boolean   false     constructor         ngOnInit         this stuff             name   abc   id  1            name   huo   id  2            name   bar   id  3            name   foo   id  4            name   thing   id  5            name   other   id  6                 toggle         this show    this show         log thing        console log thing            I know the easy solution is to move the  ngIf up a level but for scenarios like looping over list items in a ul  I d end up with either an empty li if the collection is empty  or my lis wrapped in redundant container elements   Example at this plnkr   Note the console error   EXCEPTION  TypeError  Cannot read property  name  of null in    thing name   in ShellComponent 5 12    Am I doing something wrong or is this a bug

User · Answer

Table below only lists items that have a "beginner" value set. Requires both the *ngFor and the *ngIf to prevent unwanted rows in html.

Originally had *ngIf and *ngFor on the same <tr> tag, but doesn't work. Added a <div> for the *ngFor loop and placed *ngIf in the <tr> tag, works as expected.

<table class="table lessons-list card card-strong ">
  <tbody>
  <div *ngFor="let lesson of lessons" >
   <tr *ngIf="lesson.isBeginner">
    <!-- next line doesn't work -->
    <!-- <tr *ngFor="let lesson of lessons" *ngIf="lesson.isBeginner"> -->
    <td class="lesson-title">{{lesson.description}}</td>
    <td class="duration">
      <i class="fa fa-clock-o"></i>
      <span>{{lesson.duration}}</span>
    </td>
   </tr>
  </div>
  </tbody>

</table>

User · Answer

in html    lt div  ngClass     disabled-field    show    ngFor  let thing of stuff  gt        thing name    lt  div gt    in css     disabled-field       pointer-events  none      display  none

User · Answer

As  Zyzle mentioned  and  G  nter mentioned in a comment  https   github com angular angular issues 7315   this is not supported   With    lt ul  ngIf  show  gt     lt li  ngFor  let thing of stuff  gt        log thing         lt span gt   thing name   lt  span gt     lt  li gt   lt  ul gt    there are no empty  lt li gt  elements when the list is empty   Even the  lt ul gt  element does not exist  as expected    When the list is populated  there are no redundant container elements   The github discussion  4792  that  Zyzle mentioned in his comment also presents another solution using  lt template gt   below I m using your original markup  dash  using  lt div gt s     lt template  ngIf   show  gt     lt div  ngFor  let thing of stuff  gt        log thing         lt span gt   thing name   lt  span gt     lt  div gt   lt  template gt    This solution also does not introduce any extra redundant container elements

User · Answer

As everyone pointed out even though having multiple template directives in a single element works in angular 1 x it is not allowed in Angular 2   you can find more info from here   https   github com angular angular issues 7315  2016 angular 2 beta  solution is to use the  lt template gt  as a placeholder  so the code goes like this   lt template  ngFor  let nav link of defaultLinks    gt      lt li  ngIf  nav link visible  gt                   lt  li gt   lt  template gt    but for some reason above does not work in 2 0 0-rc 4 in that case you can use this    lt template ngFor let-nav link  ngForOf   defaultLinks   gt      lt li  ngIf  nav link visible  gt                   lt  li gt    lt  template gt    Updated Answer 2018  With updates  right now in 2018 angular v6 recommend to use  lt ng-container gt  instead of  lt template gt   so here is the updated answer    lt ng-container  ngFor  let nav link of defaultLinks   gt      lt li  ngIf  nav link visible  gt                   lt  li gt    lt  ng-container gt

User · Answer

I didn t want to wrap my  ngFor into another div with  ngIf or use  ngClass   so I created a pipe named show  show pipe ts export class ShowPipe implements PipeTransform         transform values  any    show  boolean   any         if   show          return              return values         any page html  lt table gt     lt tr  ngFor  quot let arr of anyArray   show   ngIfCondition quot  gt       lt td gt   arr label   lt  td gt     lt  tr gt   lt  table gt

User · Answer

x000D   x000D   lt  -- Since angular2 stable release multiple directives are not supported on a single element from the docs  still you can use it like below -- gt  x000D   x000D   x000D   lt ul class  list-group  gt  x000D                   lt template ngFor let-item  ngForOf   stuff   ngForTrackBy   trackBy stuff  gt  x000D                       lt li  ngIf  item name  class  list-group-item  gt   item name   lt  li gt  x000D                   lt  template gt  x000D      lt  ul gt  x000D   x000D   x000D

User · Answer

You can do this another way by checking the array length   lt div  ngIf  stuff length gt 0  gt     lt div  ngFor  let thing of stuff  gt        log thing         lt span gt   thing name   lt  span gt     lt  div gt   lt  div gt

User · Answer

You can t have ngFor and ngIf on the same element  What you could do is hold off on populating the array you re using in ngFor until the toggle in your example is clicked   Here s a basic  not great  way you could do it  http   plnkr co edit Pylx5HSWIZ7ahoC7wT6P

User · Answer

You can also use ng-template  instead of template  See the note for the caveat of using template tag  for applying both  ngFor and ngIf on the same HTML element  Here is an example where you can use both  ngIf and  ngFor for the same tr element in the angular table    lt tr  ngFor    let fruit of fruiArray  gt       lt ng-template  ngIf     fruit   apple  gt           lt td gt  I love apples  lt  td gt       lt  ng-template gt   lt  tr gt    where fruiArray     apple    banana    mango    pineapple     Note   The caveat of using just the template tag instead of ng-template tag is that it throws StaticInjectionError in some places

User · Answer

lt div  ngFor  let thing of show   stuff       gt      log thing       lt span gt   thing name   lt  span gt   lt  div gt

User · Answer

This will work but the element will still in the DOM    hidden       display  none         lt div  class hidden    show   ngFor  let thing of stuff  gt        log thing         lt span gt   thing name   lt  span gt   lt  div gt

User · Answer

Angular v2 doesn t support more than one structural directive on the same element  As a workaround use the  lt ng-container gt  element that allows you to use separate elements for each structural directive  but it is not stamped to the DOM    lt ng-container  ngIf  show  gt     lt div  ngFor  let thing of stuff  gt        log thing         lt span gt   thing name   lt  span gt     lt  div gt   lt  ng-container gt     lt ng-template gt    lt template gt  before Angular v4  allows to do the same but with a different syntax which is confusing and no longer recommended    lt ng-template  ngIf   show  gt     lt div  ngFor  let thing of stuff  gt        log thing         lt span gt   thing name   lt  span gt     lt  div gt   lt  ng-template gt

User · Answer

On other solution might be to put an empty array in your for loop in the case where you don t want to display it  lt div  ngFor  quot let thing of show   stuff      quot  gt   Where  quot stuff quot  is an array of  quot thing quot  and  quot show quot  the boolean to display or not the content

User · Answer

Updated to angular2 beta 8  Now as from angular2 beta 8 we can use  ngIf and  ngFor on same component see here   Alternate   Sometimes we can t use HTML tags inside another like in tr  th  table  or in li  ul   We cannot use another HTML tag but we have to perform some action in same situation so we can HTML5 feature tag  lt template gt  in this way   ngFor using template    lt template ngFor  abc  ngForOf   someArray  gt      code here      lt  template gt    ngIf using template    lt template  ngIf   show  gt      code here      lt  template gt        For more information about structural directives in angular2 see here

User · Answer

You can t use multiple structural directive on same element  Wrap your element in ng-template and use one structural directive there

User · Answer

You can not use more than one Structural Directive in Angular on the same element  it makes a bad confusion and structure  so you need to apply them in 2 separate nested elements or you can use ng-container   read this statement from Angular team      One structural directive per host element      Someday you ll want to repeat a block of HTML but only when a   particular condition is true  You ll try to put both an  ngFor and   an  ngIf on the same host element  Angular won t let you  You may   apply only one structural directive to an element       The reason is simplicity  Structural directives can do complex things   with the host element and its descendents  When two directives lay   claim to the same host element  which one takes precedence  Which   should go first  the NgIf or the NgFor  Can the NgIf cancel the effect   of the NgFor  If so  and it seems like it should be so   how should   Angular generalize the ability to cancel for other structural   directives       There are no easy answers to these questions  Prohibiting multiple   structural directives makes them moot  There s an easy solution for   this use case  put the  ngIf on a container element that wraps the    ngFor element  One or both elements can be an ng-container so you don t have to introduce extra levels of HTML    So you can use ng-container  Angular4  as the wrapper  will be deleted from the dom  or a div or span if you have class or some other attributes as below    lt div class  right   ngIf  show  gt     lt div  ngFor  let thing of stuff  gt        log thing         lt span gt   thing name   lt  span gt     lt  div gt   lt  div gt

[angular] ngIf and ngFor on same element causing error

Examples related to angular

Examples related to ngfor

Examples related to angular-ng-if

[angular] *ngIf and *ngFor on same element causing error

Examples related to angular

Examples related to ngfor

Examples related to angular-ng-if

[angular] ngIf and ngFor on same element causing error