Display a column based on condition in Angular

Question

I am developing an Angular 4 application and want to display a column only if totalYears <= 7. I have a ngFor and ngIf in the th element. I am currently getting an error. How do I handle it?

<table class="table">
  <thead>
    <tr>
      <th></th>
      <!-- <ng-container *ngIf="yearList.length > 6">  -->
      <th *ngIf="totalYears <=7" *ngFor="let year of yearList"> {{year}}</th>
      <!-- </ng-container> -->
      <th>Remaining Years</th>
    </tr>
  </thead>
</table>

can you add the complete code

Aravind
– Aravind

2018-02-05 12:36:35 +00:00
Commented Feb 5, 2018 at 12:36 — Aravind
– Aravind, Commented Feb 5, 2018 at 12:36
And what is the error message exactly?

Roland Rácz
– Roland Rácz

2018-02-05 12:37:41 +00:00
Commented Feb 5, 2018 at 12:37 — Roland Rácz
– Roland Rácz, Commented Feb 5, 2018 at 12:37

Roland Rácz · Accepted Answer · 2018-02-05 12:46:29Z

3

Angular doesn't support more than one structural directive on the same element.

You have an ngFor and an ngIf too on your th element:

<th *ngIf="totalYears<=7" *ngFor="let year of yearList">{{year}}</th>

You can do something like this instead:

<ng-container *ngIf="totalYears<=7">
    <th *ngFor="let year of yearList">{{year}}</th>                                
</ng-container>

Source: https://angular.io/guide/structural-directives#one-per-element

Also: totalYears should be accessible in this template view. Try printing totalYears like {{totalYears}} for debugging, for example.

edited Feb 5, 2018 at 12:46

answered Feb 5, 2018 at 12:40

Roland Rácz

3,0093 gold badges21 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

Display a column based on condition in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related