Problem in Angular HTML template with ternary statement

Question

I have a ternary statement in an Angular HTML template. But when the statement returns false, the data is not distributed to all 6 columns.

<td colspan="getNrOfColumnHeaders() ? 8 : 6">
    {{(serverError ? 'SERVER_ERROR_TABLE_MSG' : 'NO_DATA') | translate}}
</td>

Anyone any idea what is going wrong?

You aren't binding to that attribute. Look in dev tools, you'll probably see you're setting the literal value getNrOfColumnHeaders() ? 8 : 6. — jonrsharpe
– jonrsharpe, Commented Nov 6, 2018 at 9:31

Qortex · Accepted Answer · 2018-11-06 10:30:11Z

6

You need to bind to the attribute dynamically so that Angular knows it has to update the value when it changes, so you need [colspan] instead of colspan:

<td [colspan]="getNrOfColumnHeaders() ? 8 : 6">
  {{(serverError ? 'SERVER_ERROR_TABLE_MSG' : 'NO_DATA') | translate}}
</td>

edited Nov 6, 2018 at 10:30

answered Nov 6, 2018 at 9:33

Qortex

7,5124 gold badges46 silver badges62 bronze badges

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

Comments

Skandar B.A · Accepted Answer · 2018-11-06 09:35:34Z

1

Be sure that getNrOfColumnHeaders return boolean and add brackets to colsap attribute like this.

 <td [attr.colspan]="getNrOfColumnHeaders() ? 8 : 6">
          {{(serverError ? 'SERVER_ERROR_TABLE_MSG' : 'NO_DATA') | translate}}
    </td>

answered Nov 6, 2018 at 9:35

Skandar B.A

516 bronze badges

Collectives™ on Stack Overflow

Problem in Angular HTML template with ternary statement

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related